当我在 Chrome 中调整视口大小时，为什么带有边距的网格项：自动闪烁？

Question

我注意到带有边距自动（显示网格的子项）的元素的位置有些闪烁。

我已经隔离了这个问题，请看下面的代码。

我知道我可以用不同的方法将元素居中，但这个方法应该有效。我到处搜索，但找不到任何有同样问题的人，但我在另一台计算机上尝试过，它具有相同的行为。

我希望红色框只是居中在父元素的中间，而不是在调整大小时闪烁

section {
  display: grid;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: auto;
}

<section>
  <div></div>
</section>

Answer 1

我不知道为什么margin: autoChrome 中的项目不水平居中。它在 Firefox 和 Edge 中运行良好。可能是一个错误。

这是一个干净且简单的网格替代方案：

不要margin: auto在物品上使用，而是justify-items: center在容器上使用。这似乎适用于所有浏览器。

section {
  display: grid;
  justify-items: center;
}

div {
  width: 200px;
  height: 200px;
  background: red;
}

<section>
  <div></div>
</section>

jsFiddle 演示

另请参阅：