如何在Flexbox中垂直和水平居中元素

下面是两种常见的居中解决方案。

一种用于垂直对齐的弹性项目（flex-direction: column），另一种用于水平对齐的弹性项目（flex-direction: row）。

在这两种情况下，居中的div的高度可以是可变的，未定义的，未知的，不重要。

以下是两者的HTML代码：

<div id="container"><!-- flex容器 -->

    <div class="box" id="bluebox"><!-- flex项目 -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex项目 -->
        <p>DIV #2</p>
    </div>

</div>

CSS（不包括装饰样式）

当弹性项目垂直堆叠时：

#container {
    display: flex;           /* 建立flex容器 */
    flex-direction: column;  /* 将主轴设置为垂直方向 */
    justify-content: center; /* 在这种情况下，垂直居中项目 */
    align-items: center;     /* 在这种情况下，水平居中项目 */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* 将文本在<p>中居中，<p>不是flex项目 */
}

演示

当弹性项目水平堆叠时：

调整上面代码中的flex-direction规则。

#container {
    display: flex;
    flex-direction: row;     /* 将主轴设置为水平方向（默认设置） */
    justify-content: center; /* 在这种情况下，水平居中项目 */
    align-items: center;     /* 在这种情况下，垂直居中项目 */
    height: 300px;
}

演示

居中弹性项目的内容

弹性格式化上下文的范围仅限于父子关系。超出子代的弹性容器的后代不参与弹性布局，并将忽略弹性属性。基本上，弹性属性在子代之外不可继承。

因此，您始终需要将display: flex或display: inline-flex应用于父元素，以便将弹性属性应用于子元素。

为了垂直和/或水平居中文本或其他内容，使项目成为（嵌套的）弹性容器，并重复居中规则。

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* 对于单行弹性容器 */
    align-content: center;      /* 对于多行弹性容器 */
}

更多细节请参见：如何在flexbox中垂直对齐文本？

或者，您可以将margin: auto应用于弹性项目的内容元素。

p { margin: auto; }

在这里了解有关弹性auto边距的更多信息：对齐弹性项目的方法（参见box＃56）。

居中多行弹性项目

当弹性容器有多行（由于换行）时，align-content属性将对交叉轴对齐至关重要。

来自规范：

更多细节请参见：flex-wrap如何与align-self，align-items和align-content一起工作？

浏览器支持

所有主要浏览器都支持Flexbox，除了IE < 10。一些最近的浏览器版本，如Safari 8和IE10，需要供应商前缀。为了快速添加前缀，可以使用Autoprefixer。更多详细信息请参见这个答案。

旧浏览器的居中解决方案

有关使用CSS表格和定位属性的替代居中解决方案，请参见此答案：https://stackoverflow.com/a/31977476/3597276

我认为你想要的是以下内容。

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>