Почему элемент сетки с полем: автоматическое мерцание при изменении размера области просмотра в Chrome? - PullRequest
Новая
       71

Почему элемент сетки с полем: автоматическое мерцание при изменении размера области просмотра в Chrome?

4 голосов
/ 08 октября 2019

Я заметил некоторое мерцание позиции элемента с полем auto (дочерний элемент сетки отображения).

Я выделил проблему, см. Код ниже.

ЯЯ знаю, что я могу сосредоточить твой элемент с другим подходом, но этот должен работать. Я искал все, и я не могу найти никого с той же проблемой, но я пробовал на другом компьютере, и он имеет такое же поведение.

Я ожидаю, что красное поле будет просто по центру в середине родительского элементаи не мерцают при изменении размера 

section {
  display: grid;
}

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: auto;
}
<section>
  <div></div>
</section>

1 Ответ

0 голосов
/ 09 октября 2019

Я не уверен, почему margin: auto не центрирует элемент в Chrome по горизонтали. Он отлично работает в 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 demo

Также см .:

...