How to vertically center text with CSS?

Sometimes, we want to vertically center text with CSS.

We’ll look at how to vertically center text with CSS, in this article.

How to vertically center text with CSS?

We use the flexbox , to vertically center text with CSS.

For instance, we write

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

And then with justify-content: center;, we center it’s content horizontally.

And we center its content vertically with align-items: center;.

Conclusion

And then we use flexbox, to vertically center text with CSS.