Sometimes, we want to center a "position: absolute" element with CSS.
In this article, we’ll look at how to center a "position: absolute" element with CSS.
How to center a "position: absolute" element with CSS?
To center a "position: absolute" element with CSS, we use flexbox.
For instance, we write
.parent {
position: relative;
display: flex;
justify-content: center;
}
.child {
position: absolute;
}
to make the element with class parent
a flex container with display: flex;
.
We make its contents centered horizontally with justify-content: center;
.
And we make the elemennt with class child
, which is a child of the element with class parent
have absolute position with position: absolute;
.
Conclusion
To center a "position: absolute" element with CSS, we use flexbox.