В чем разница между margin:auto и justify-content / align-items center?

в центре по горизонтали и по вертикали одновременно, есть два простых варианта:

первый

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

второй

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

в чем разница? В каких ситуациях мы будем использовать одно над другим?

6
centering css css3 flexbox html

1 ответов

в первом примере...

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

... the auto маржа применяется только к элементу flex и центрам, которые один элемент flex в контейнере.

во втором примере...

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

вы центрируете элементы с уровня контейнера. Этот код будет все предметы.

кроме того, имейте в виду, если вы используете оба метода одновременно, margin: auto должны верх.

8.1. Выравнивание с авто поля

до выравнивания с помощью justify-content и align-self любой положительное свободное пространство распределяется на автоматические поля в этом измерении

если свободное пространство распределено на автоматические поля, свойства выравнивания не будет иметь никакого эффекта в этом измерении, потому что прибыль будет украл все свободное пространство, оставшееся после сгибания.

но самое важное отличие, для практических целей, может быть поведение, когда элемент flex превышает размер контейнера. В этом случае при использовании кода уровня контейнера теряется доступ к частям элемента. Элемент исчезает с экрана и недоступен с помощью прокрутки.

чтобы преодолеть эту проблему, используйте margin: auto для центрирования для правильной работы.

вот более полное объяснение:

IE ошибки:

7