How to center a position: fixed element with CSS?

Spread the love

To center a position: fixed element with CSS, we set the transform property.

For instance, we write

div {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

to set the left and top to 50% to move the element near the center.

Then we add transform: translate(-50%, -50%); to move the div to the center.

By John Au-Yeung