为什么 justify-content 不以我的 div 为中心？

我试图将两个 div 水平居中放在爸爸 div 内。

爸爸 div 设置为flex-direction: column因为我希望子 div 一个在另一个之下，但位于页面的中心。

justify-content: center;应该做但不起作用。

我终于让它工作了align-self，但是有什么解释为什么这么多代码不足以将 div 居中吗？

这是我的代码：

<div class="main">
    <div class="child-1">HI</div>
    <div class="child-2">WE BUILD AWESOME STUFF</div>
</div>

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

主轴与横轴

考虑主轴 and 交叉轴柔性容器的：

                                                                                                                       ^{Source: W3C http://www.w3.org/TR/css-flexbox-1/#box-model}

在上图中，主轴是水平的，交叉轴是垂直的。这些是弹性容器的默认方向。

然而，这些方向可以很容易地切换flex-direction http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction财产。

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

（横轴始终垂直于主轴。）

justify-content 属性（仅适用于主轴）

The justify-content属性沿 Flex 容器的主轴对齐 Flex 项目。

换句话说，当你的容器是flex-direction: row，这使得主轴水平。justify-content: center将按您的预期工作。

但是你已经将容器设置为flex-direction: column。这意味着主轴现在是垂直的，并且justify-content将向上/向下定位弹性项目，而不是向左/向右。

由于您的示例中没有额外的高度，因此您不会注意到任何不同；justify-content没有工作空间。 （与块元素默认填充 100% 的宽度不同，必须定义高度。否则，元素默认为auto– 内容的高度。）但是给容器一定的高度，看看会发生什么。

align-* 属性（仅适用于横轴）

The align-self, align-items and align-content属性在弹性容器的横轴上运行（同样，始终垂直于主轴）。

因为主轴是垂直的，align-*属性将使弹性项目左/右对齐。这就是为什么align-self努力让你的 div 居中。

快速总结：取决于flex-direction，主轴和横轴切换，并保留指定的属性。

Solution

如果您的目标是最少的代码，那么这就是您所需要的：

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

更多细节：在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？ https://stackoverflow.com/q/32551291/3597276