以下是两者的HTML代码：

    
        
DIV #1
    
        
DIV #2

CSS样式（不包括装饰样式）

当伸缩项垂直堆叠：

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}
.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in 
, which is not a flex item */
}

演示

当伸缩项水平堆叠时：

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

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

演示

将伸缩项的内容居中

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

因此，为了在伸缩项中垂直和/或水平居中文本或其他内容，请将该项设为（嵌套）伸缩容器，并重复居中规则。

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

在此处了解更多详细信息：如何在flexbox中垂直对齐文本？

或者，您还可以将margin:auto应用于伸缩项的内容元素。

p { margin: auto; }

关于伸缩auto边距的详细信息在此处对齐伸缩项的方法（请参见box＃56）。

居中多行伸缩项

当伸缩容器具有多行（由于换行）时，需要使用align-content属性进行跨轴对齐。

从规范中可以看出：

8.4. Packing Flex Lines: the align-content
property

当伸缩容器的交叉轴上有额外的空间时，align-content属性将在其中对齐伸缩容器的行，类似于justify-content对齐主轴上的单个项目。注意，此属性对于单行伸缩容器没有影响。

更多细节请参见：flex-wrap 如何与 align-self、align-items 和 align-content 一起使用？

---

浏览器支持

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

---

旧浏览器的居中解决方案

使用 CSS 表格和定位属性的备选居中解决方案，请参见这个答案：https://stackoverflow.com/a/31977476/3597276