How do you vertically center items in Jumbotron using flex while displaying in block?

Question

I tried this to vertically center all items in a Jumbotron,

display: flex;
justify-content: center;
align-items: center;

But the issue is all items are lined up in a single line like they are displaying inline. How do you vertically center them while still displaying them in block.

Answer 1

Since block element stacks vertically, change the flex direction to column, and so will the flex items.

display: flex;
flex-direction: column;              /*  added  */
justify-content: center;
align-items: center;