使用flexbox水平居中内容

Question

我正在努力将我的容器中的一些内容水平居中:

https://jsfiddle.net/y56t31q9/6/

.container {
  display: flex;
  flex-direction: column;
  width: 600px;
  background-color: blue;
  justify-content: center;
  /* Not centering content horizontally? */
}
.item {
  max-width: 500px;
  height: 100px;
  background-color: yellow;
  border: 2px solid red;
}

<div class="container">
  <div class="item"></div>
  <section class="item"></section>
  <section class="item"></section>
  <footer class="item"></footer>
</div>

我本以为是合理的 - 内容会成功,但无济于事.

任何帮助将不胜感激谢谢!

Answer 1

该属性justify-content:center使flex-items沿着flex方向对齐-使用align-items:center-请参见下面的演示：

.container {
  display: flex;
  flex-direction: column;
  width: 600px;
  background-color: blue;
  justify-content: center;
  align-items:center;/*NEW*/
}
.item {
  max-width: 500px;
  width: 250px;/*NEW*/
  height: 100px;
  background-color: yellow;
  border: 2px solid red;
}

<div class="container">
  <div class="item"></div>
  <section class="item"></section>
  <section class="item"></section>
  <footer class="item"></footer>
</div>

参考：Flexbox W3C规格

下面是适用于当图像flex-direction是一行：

一种。主轴对齐方式：对齐内容

b。横轴对齐：对齐项

当flex-directionis是row时，主轴是水平的，而当它是column时，主轴是相反的。