Sometimes, we want to vertically align text in a div with CSS.
In this article, we’ll look at how to vertically align text in a div with CSS.
How to vertically align text in a div with CSS?
To vertically align text in a div with CSS, we can use flexbox.
For instance, we write
<div>hello world</div>
to add a div.
Then we write
div {
display: -webkit-flex;
display: flex;
align-items: center;
height: 300px;
background-color: #888;
}
to make the div a flex container with display: flex;.
Then we vertically center the content in the div with align-items: center;.
We need to set the height so that the vertical centering will work.
Conclusion
To vertically align text in a div with CSS, we can use flexbox.
