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.
