Why does a grid item with margin: auto flicker when I resize the viewport in Chrome?

Question

I am noticing some flickering on the position of element with margin auto (child of display grid).

I've isolated the problem, please see the code below.

I am aware I can center thee element with a different approach but this one should work. I searched all over and I can't find anyone with the same problem, but I tried on a different computer and it has the same behaviour.

I expect the red box to just center in the middle of parent element and not flicker on resize

section {
  display: grid;
}

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

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

Congrats, you discovered a Chrome bug, you can report it – Temani Afif Oct 08 '19 at 15:58 — Temani Afif, Oct 08 '19 at 15:58
thanks @Temani-afif, I reported it already... – Sopht Oct 10 '19 at 13:26 — Sopht, Oct 10 '19 at 13:26

Michael Benjamin · Answer 1 · 2019-10-09T03:10:29.513

I'm not sure why margin: auto doesn't horizontally center the item in Chrome. It works fine in Firefox and Edge. Probably a bug.

Here's a clean and easy grid alternative:

Instead of using margin: auto on the item, use justify-items: center on the container. That appears to work on all browsers.

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

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

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

jsFiddle demo

Also see:

Why does a grid item with margin: auto flicker when I resize the viewport in Chrome?

1 Answers1

jsFiddle demo