Html 什么'；“页边距：自动”和“对齐内容/对齐项目中心”之间的区别是什么？

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

首先

第二

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

---

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

在您的第一个示例中

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

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

。。。

auto

边距仅适用于弹性项目，并将该弹性项目置于容器内的中心

在你的第二个例子中

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

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

您正在从容器级别将项目居中。此代码将使所有项目居中

此外，请记住，如果同时使用这两种方法，

margin:auto

占优势

在对齐之前，通过

对齐内容

和

对齐自身

，任何 正的自由空间分配给该维度中的自动边距

如果将可用空间分配给自动边距，则路线属性 将在该维度中无效，因为边距将 偷了所有的自由空间后，弯曲

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

要解决此问题，请使用

margin:auto

对中以正常工作

这里有一个更完整的解释：

• （见方框56）

IE漏洞：

---

两种解决方案的作用相同。这里缺少的是到外部的高度，例如高度：100vh；