如何使用 flexbox 垂直居中 div [重复]

Posted 2023-03-05

【中文标题】如何使用 flexbox 垂直居中 div [重复]

【英文标题】：How to vertically center div with flexbox [duplicate]

【发布时间】：2016-05-17 07:50:10

【问题描述】：

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

我尝试添加这个，但不起作用：

 display: flex;
 align-items: center;

这里是jsfiddle：

https://jsfiddle.net/ms5s5uhy/

【参考方案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

或者...

您可以从 flex 容器中删除 align-items 关键字属性，并在 flex 项目上简单地使用 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

【讨论】：

另一个非常好的参考可以在这里找到：css-tricks.com/snippets/css/a-guide-to-flexbox