Question

要同时水平和垂直居中，有两个简单的选项：

第一

Location

第二

.outer {
  display:flex;
}
.inner {
  margin:auto;
}

有什么区别？在什么情况下我们会使用一个而不是另一个？

Answer 1

在你的第一个例子中......

.outer {
  display: flex;
}
.inner {
  margin: auto;
}

... auto保证金仅适用于灵活项目，并且集中在容器中的一个弹性项目中。

在你的第二个例子......

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

您正在集装箱级别的中心项目。此代码将以所有项为中心。

另外，请注意，如果您同时使用这两种方法，则margin: auto should为准。

8.1. Aligning with auto margins

在通过justify-content和align-self进行对齐之前   正空闲空间被分配到该维度的自动边距

如果可用空间分配给自动边距，则为对齐属性   在那个维度上没有效果，因为边距会有   在弯曲后偷走了剩下的所有可用空间。

但实际上，最重要的区别 可能是Flex项超过容器大小时的行为。发生这种情况时，在使用容器级代码时，您将无法访问项目的某些部分。该项目从屏幕上消失，无法通过滚动访问。

要解决此问题，请使用margin: auto进行居中以正常工作。

以下是一个更完整的解释：

IE Bugs：

保证金之间有什么区别：auto和justify-content / align-items center？

1 个答案: