How to center absolute div horizontally using CSS?

Sometimes, we want to center absolute div horizontally using CSS.

In this article, we’ll look at how to center absolute div horizontally using CSS.

How to center absolute div horizontally using CSS?

To center absolute div horizontally using CSS, we use flexbox.

For instance, we write

<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

to add nested divs.

Then we write

.box {
  display: flex;
  justify-content: center;
}

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

Then we center its contents with justify-content: center;.

Conclusion

To center absolute div horizontally using CSS, we use flexbox.