How to center floating divs within another div with CSS?

Spread the love

Sometimes, we want to center floating divs within another div with CSS.

In this article, we’ll look at how to center floating divs within another div with CSS.

How to center floating divs within another div with CSS?

To center floating divs within another div with CSS, we use flexbox.

For instance, we write

<div class="wpr">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

to add a div with spans inside.

Then we write

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

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

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

Conclusion

To center floating divs within another div with CSS, we use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *