Vertical Centering with Flexbox

I tend to forget that flexbox makes it really easy to vertically center elements. It comes in handy when you want to make giant heros with text inside of them like the examples below.

Vertical Centered Examples

Vertical Center

In css add the following…

Step 1

display: flex on the parent (container)

Step 2

margin: auto on the child (h1)

Code Example

View Example on Codepen