如何使用flexbox垂直居中div

Question

我想用flexbox垂直居中一个div（在另一个div中）。

我尝试添加此功能，但不起作用：

 display: flex;
 align-items: center;

这里是jsfiddle：

https://jsfiddle.net/ms5s5uhy/

Answer 1

您需要将flex属性放在 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

您可以从弹性容器中删除align-items关键字属性，只需在弹性项目上使用auto边距。

#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

点击此处了解详情：Methods for Aligning Flex Items