How to vertically align into the center of the content of a div with defined width/height with CSS?

Spread the love

Sometimes, we want to vertically align into the center of the content of a div with defined width/height with CSS.

In this article, we’ll look at how to vertically align into the center of the content of a div with defined width/height with CSS.

How to vertically align into the center of the content of a div with defined width/height with CSS?

To vertically align into the center of the content of a div with defined width/height with CSS, we use flexbox.

For instance, we write

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

to make the elements with class container a flex container with display: flex;.

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

Conclusion

To vertically align into the center of the content of a div with defined width/height with CSS, we use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *