html - 为什么边距为 : auto flicker when I resize the viewport in Chrome? 的网格元素

Question

我注意到带有 margin auto 的元素(显示网格的子元素)的位置有些闪烁。

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

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

我希望红色框刚好位于父元素的中间，并且在调整大小时不会闪烁

section {
  display: grid;
}

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

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

Answer 1

我不确定为什么 margin: auto 没有在 Chrome 中将元素水平居中。它在 Firefox 和 Edge 中运行良好。 Probably a bug.

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

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

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

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

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

jsFiddle demo

另见:

• The difference between justify-self, justify-items and justify-content in CSS Grid
• Can auto margins work in CSS Grid like they do in Flexbox?