Flexbox：水平和垂直居中

Question

如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字都彼此相邻（按行），并水平居中。

.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>

Answer 1

我认为您想要以下内容。

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>

你的.flex-item元素应该是块级（div而非span）如果你想要的高度和顶部/底部填充，以正常工作。

另外，在上.row，将宽度设置为auto而不是100%。

您的.flex-container属性很好。

如果您希望.row垂直居中于视口中，请为html和分配100％的高度body，然后将页body边距清零。

请注意，.flex-container需要一个高度才能看到垂直对齐效果，否则，容器会计算出包围内容所需的最小高度，该最小高度小于此示例中的视口高度。

附注：
本flex-flow，flex-direction，flex-wrap性能会犯这样的设计更容易实现。我认为.row不需要容器，除非您要在元素周围添加一些样式（背景图像，边框等）。