September 03, 2020

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!).


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


    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.