Question

我正在尝试将红色框放在页面中间。

我已将flex容器设置为100％的高度，并且还将html，body设置为100％，并且它仍然没有对齐中心。

任何人都可以帮助我理解为什么它不起作用？谢谢！

html, body {
  height: 100%;
}
.flex-container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  height: 100%;
}
.box {
  flex: 0 0 100px;
  background: red;
  width: 100px;
}

<div class='flex-container'>
    <div class='box'></div>
</div>

Answer 1

您使用justify-content来对齐主轴上的弹性项目。

您使用align-items来对齐十字轴上的弹性项目。

由于您的Flex容器为flex-direction: column：

主轴是垂直的，
横轴是水平的。

justify-content: center工作正常。

您只需添加align-items: center。

html, body {
  height: 100%;
}
.flex-container {
  display: flex;
  flex-flow: column;
  justify-content: center;       /* centers flex items vertically, in this case */
  align-items: center; /* NEW */ /* centers flex items horizontally, in this case */
  height: 100%
}
.box {
  flex: 0 0 100px;
  background: red;
  width: 100px;
}

<div class='flex-container'>
  <div class='box'></div>
</div>

以下是更详细的解释：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

您需要将align-items添加到.flex-container

align-items: center;

请点击此处查看示例https://jsfiddle.net/x9gyheo6/1/

为什么我的弹性项目不在中心？

2 个答案: