How to vertically align text inside a flexbox?

Question

I would like to use flexbox to vertically align some content inside an

but not having great success.

I\'ve checked online and many of the tut

Answer 1

The best move is to just nest a flexbox inside of a flexbox. All you have to do is give the child align-items: center. This will vertically align the text inside of its parent.

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

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