How to vertically center div with flexbox

Question

I want to vertically center a div (that is in another div) with flexbox.

I tried adding this, but doesn't work:

 display: flex;
 align-items: center;

Here jsfiddle:

https://jsfiddle.net/ms5s5uhy/

Answer 1

You need to put the flex properties in the parent div:

#boss {
    border: 1px solid #000;
    width: 300px;
    height: 300px;
    display: flex;           /* moved here from child div */
    align-items: center;     /* moved here from child div */
}

#kids {
    margin: 0 auto;
    border: 1px solid #000;
    width: 150px;
    height: 150px;
}

Revised Fiddle

OR...

You could remove the align-items keyword property from the flex container and simply use auto margins on the flex item.

#boss {
    border: 1px solid #000;
    width: 300px;
    height: 300px;
    display: flex;           
    /* align-items: center <-- REMOVE */
}

#kids {
    margin: auto;            /* adjusted */
    border: 1px solid #000;
    width: 150px;
    height: 150px;
}

Revised Fiddle

Learn more here: Methods for Aligning Flex Items