How to center a “position: absolute” element with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.