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

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 {
  display: flex;
  align-items: center;
  justify-content: center;
}

to make the element with ID parent a flex container with display: flex;.

Then we vertically align the items inside with align-items: center;.

We horizontally align the items inside with justify-content: center;.

Conclusion

To center a "position: absolute" element with CSS, we use flexbox.