内容居中水平使用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对齐沿着弯曲方向弯曲项 - 使用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为行的图像：

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

b。十字轴对齐：对齐项

当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属性来水平居中，如果它是row，则使用justify-center。