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

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.

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;