Centre align a position: absolute element in CSS

Photo by Johannes Plenio on Unsplash

Let’s align an element with position as absolute today. I saw a number of ways on stack overflow but only got this one working.

All we need to do is create a parent element to the one which is having position as absolute and set it’s position property as relative in css.

.parent-container {
  position: relative;
}

Then add the following css properties to the element that has position as absolute and needs to be centred.

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

And that is all we needed to do, your element is positioned at the centre now.

You can find the example code here.

Thanks for reading.