Vertically align content with CSS flex

We’re really only adding this to our blog because we’re constantly Googling it (even though it’s super simple!).

HTML

<div class="holder">
    <div class="content">
        I will be vertically aligned. Hooray!
    </div>
</div>

CSS

.holder{
    display: flex;
    flex-direction: column;

    /* This centers content vertically */
    justify-content: center;

    /* This centers content horizontally, think 'text-align:center' */
    align-items: center;

}

Working Example

Note that the above example places a height on the .holder element. This was added to show how the content gets vertically aligned.