Centre align a position: absolute element in CSS

Abhinav Gupta
Apr 27, 2021

--

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.

--

--

Abhinav Gupta
Abhinav Gupta

Written by Abhinav Gupta

Abhinav is a software engineer

No responses yet