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

【问题标题】：CSS Flex: Horizontal Centering and stacking using flexCSS Flex：使用 flex 进行水平居中和堆叠
【发布时间】：2015-05-26 11:26:50
【问题描述】：

我正在尝试使用 justify-content 和 flex-direction 的组合创建水平居中的 div。

问题：子 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;
    }

【问题讨论】：

.parent * { 显示：块； } 不工作？
刚试过，不行。
钢笔或小提琴怎么样？

标签： html css flexbox

【解决方案1】：

flex-direction 属性更改给定容器的主轴 - 因此，假设您将方向更改为 column，您现在希望使用 align-items 与 justify-content：

.foo {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

您可以阅读有关flex-directionhere 和here's a Codepen 的更多信息，以演示新属性的用法。

【讨论】：