How to center align an absolutely positioned div with CSS?

Spread the love

To center align an absolutely positioned div with CSS, we set the transform property.

For instance, we write

div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  transform: translateY(-50%);
}

to horizontally align the div with left: 50%; and transform: translateX(-50%);.

And we vertically align the div with top: 50%; and transform: translateY(-50%);.