Sometimes, we want to align contents inside a div with CSS.
In this article, we’ll look at how to align contents inside a div with CSS.
How to align contents inside a div with CSS?
To align contents inside a div with CSS, we use flexbox.
For instance, we write
<div
style="
display: flex;
align-items: center;
width: 200px;
height: 140px;
padding: 10px 40px;
border: solid 1px black;
"
>
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
</div>
</div>
to make the outer div with a flex container with display: flex;.
We align the items vertically centered with align-items: center;.
Conclusion
To align contents inside a div with CSS, we use flexbox.
