How to vertically align text in a div with CSS?

Sometimes, we want to vertically align text in a div with CSS.
We’ll look at how to vertically align text in a div with CSS, in this article.

How to vertically align text in a div with CSS?

Use flexbox, to vertically align text in a div with CSS.
For instance, we can write

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

to add some elements.

Then we write

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

to make the li elements flex containers with display: flex;.
And then we set the flex direction, which is vertical with flex-direction: column;.
We vertically center content with justify-content: center;.
And then we horizontally center content with align-content: center;

Conclusion

Then we use flexbox, to vertically align text in a div with CSS.