-2

I have a div with the following css code:

.popup{
  width: 50%;
  margin: auto;
  display: none;
  animation-name: popup;
  animation-duration: 0.15s;
  position: fixed;
  background-color: #cf5c36;
}

And I can't figure out how to center it. All the advice I can find involves changing the display, or doesn't work with display: none;. Does anyone know how I could go about it it?

Decentprogrammer
  • 23
  • 4
  • 1
    Why bother center a `display: none;` element? It's not visible right. – 0stone0 Feb 03 '22 at 11:17
  • Does this answer your question? [Center a position:fixed element](https://stackoverflow.com/questions/2005954/center-a-positionfixed-element) – 0stone0 Feb 03 '22 at 11:17

1 Answers1

1

You can set the absolute position and transform it to center

top: 50%;
left: 50%;
transform: translate(-50%, -50%);
kswang
  • 160
  • 9