How to center an absolutely positioned element in a div with CSS?

Sometimes, we want to center an absolutely positioned element in a div with CSS.

In this article, we’ll look at how to center an absolutely positioned element in a div with CSS.

How to center an absolutely positioned element in a div with CSS?

To center an absolutely positioned element in a div with CSS, we use flexbox.

For instance, we write

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

to make the div a flex container with display: flex;.

We vertically center its content with align-items: center;.

And we horizontally center its content with justify-content: center;.

Conclusion

To center an absolutely positioned element in a div with CSS, we use flexbox.