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;

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;

Answer 2

Adding to above answer, you can also center text elements such as h1<\/code> , p<\/code> or a<\/code> by setting text-align to center.

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