How to vertically align text in a div with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.