FlexBox：水平和垂直居中

Question

如何使用FlexBox在容器内水平和垂直地居中div。在下面的例子中，我希望每一个数字在彼此下面（在行中），水平居中。

null

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

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

null

http://codepen.io/anon/pen/zlxbo

Answer 1

下面是两种通用的对中解决方案。

一个用于垂直对齐的弹性项目(弹性方向：列)，另一个用于水平对齐的弹性项目(弹性方向：行)。

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

以下是两者的HTML：

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

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

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

</div>

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 <p>, 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格式设置上下文的范围仅限于父子关系。子容器之外的flex容器的后代不参与flex布局，并且将忽略flex属性。从本质上讲，flex属性不能继承到子属性之外。

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

为了垂直和/或水平居中包含在flex项中的文本或其他内容，使项成为（嵌套的）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应用于flex项的内容元素。

p { margin: auto; }

在这里了解flexauto边距：对齐flex项目的方法（参见框56）。

当flex容器有多行时（由于换行），align-content属性将是跨轴对齐所必需的。

根据规范：

8.4.打包柔性行:align-content属性

当交叉轴中有多余的空间时，align-content属性对齐flex容器中的行，类似于justify-content对齐主轴中的各个项。注意，此属性对单行flex容器不起作用。

这里有更多的细节：flex-wrap如何与align-self、align-items和align-content一起工作？

除IE<10外，所有主要浏览器都支持Flexbox。一些最近的浏览器版本，如Safari 8和IE10，需要供应商前缀。有关添加前缀的快速方法，请使用Autoprefixer。更多详情请参阅本答案。

有关使用CSS表和定位属性的替代居中解决方案，请参阅以下答案:https://stackoverflow.com/A/31977476/3597276

Answer 2

我想你想要像下面这样的东西。

null

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    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>