How to vertically align text inside a flexbox with CSS?

Spread the love

Sometimes, we want to vertically align text inside a flexbox with CSS.

In this article, we’ll look at how to vertically align text inside a flexbox with CSS.

To vertically align text inside a flexbox with CSS, we can use the justify-content and align-item properties.

For instance, we write

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

.child {
  display: flex;
  align-items: center;
}

to make the elements with class parent a flex container that has flex direction horizontal.

Then we use justify-content: center; and align-items: center; to horizontally and vertically center its child items respectively.

Then we vertically center the items with class child with align-items: center;.

To vertically align text inside a flexbox with CSS, we can use the justify-content and align-item properties.