margin:auto和justify-content/align-items center有什么区别？（注：这是一个提问标题，不需要回答）

Question

21

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

第一种

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

第二。

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

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

- Skif

这两个解决方案是相同的。缺少的是对.outer设置一个高度，例如height:100vh;。 - G-Cyrillus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

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

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

对于 auto margin 只应用于弹性项目，并使该弹性项目在容器中居中。

在你的第二个示例中...

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

你正在从容器级别居中项目。这段代码将使所有项目都居中。

另外，请记住，如果同时使用这两种方法，margin: auto 应该起作用。

8.1. 使用自动边距对齐

在通过 justify-content 和 align-self 对齐之前，任何正的自由空间都会在该维度上分配给自动边距。

如果自由空间被分配给了自动边距，在该维度上，对齐属性将不起作用，因为边距会在弹性后夺取所有剩余的自由空间。

但是最重要的差异，对于实际目的而言，可能是当弹性项目超过容器大小时的行为。当这种情况发生时，使用容器级别的代码时，你将失去访问项目的部分内容。该项目从屏幕上消失，并且无法通过滚动访问。

为了解决这个问题，请使用 margin: auto 使居中正常工作。

以下是更详细的说明：

IE 错误：