CSS Flex：使用flex进行水平居中和堆叠

Question

我正在尝试创建水平居中的div，它们使用justify-content和flex-direction的组合相互叠加。

问题： 子div被堆叠在一起，但不再是水平居中，而是垂直居中。

    .parent {
      position: fixed;
      display: flex;
      justify-content: center; // children becomes vertically centered
      flex-direction: column; // stacking 
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

Answer 1

flex-direction属性会更改给定容器的主轴 - 因此，如果您将方向更改为column，则现在要使用align-items与{{1} }：

justify-content

您可以详细了解.foo { position: fixed; display: flex; flex-direction: column; align-items: center; top: 0; bottom: 0; left: 0; right: 0; } here和here's a Codepen，了解新媒体资源的使用情况。