How to vertically center text with CSS?

Sometimes, we want to vertically center text with CSS.

In this article, we’ll look at how to vertically center text with CSS.

How to vertically center text with CSS?

To vertically center text with CSS, we use flexbox.

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 we center its content horizontally with justify-content: center;.

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

Conclusion

To vertically center text with CSS, we use flexbox.