使用flexbox水平居中内容

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我原以为 justify-content 会做到这一点，但无济于事。

非常感谢任何帮助 谢谢！

Answer 1

属性justify-content:center沿着flex方向对齐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 spec

以下是flex-direction 行时适用的图片：

一个。主轴对齐：对齐内容

湾十字轴对齐：对齐项目

当flex-direction是行时，主轴是水平的，但当它是列时，它是相反的方式。

Answer 2

添加align-items:center;

.container {
  display: flex;
  flex-direction: column;
  width: 600px;
  background-color: blue;
  justify-content: center; 
  align-items:center;
}

Answer 3

删除flex-direction:column和max-width:500px。 给一些固定宽度说100px它会正常工作。如果您使用flex-direction:column使用align-items:center属性进行水平居中，则使用justify-center row。