Как отцентрировать элемент с помощью flexbox

Что проверяют

Вопрос базовый, поэтому оценивают не три свойства, а понимание осей flexbox: что делает justify-content, а что align-items, и что меняется при flex-direction: column. Следом часто просят показать второй способ и объяснить, почему элемент не центрируется по вертикали.

Как отвечать

Классический вариант на родителе:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

Разберите, что здесь происходит:

• justify-content: выравнивание по главной оси. При flex-direction: row (по умолчанию) это горизонталь;
• align-items: выравнивание по поперечной оси. По умолчанию элементы растягиваются по ней, поэтому без center блок занимает всю высоту;
• высота контейнера: блок по умолчанию высотой в своё содержимое, центрировать по вертикали внутри него нечего. Нужна высота или min-height;
• 100dvh вместо 100vh: на мобильных vh не учитывает выезжающую панель браузера, и низ контента уходит под неё.

Второй способ: у родителя только display: flex, у ребёнка margin: auto. Автоотступы во flex-контейнере забирают свободное место с обеих сторон по обеим осям. Бонус: если содержимое больше контейнера, оно не уезжает за верхний край, а с justify-content: center при переполнении верх обрезается и до него не доскроллить. Для этого же случая есть ключевое слово safe: justify-content: safe center.

Для сравнения можно назвать grid: display: grid; place-items: center делает то же короче. Старый приём с position: absolute, top: 50% и transform: translate(-50%, -50%) уместен для оверлеев, но вынимает элемент из потока.

Где спотыкаются

Меняют flex-direction на column и продолжают считать, что justify-content отвечает за горизонталь. Оси поворачиваются вместе с направлением.

Путают align-items и align-content. При flex-wrap: nowrap align-content ни на что не влияет, он распределяет строки, а не элементы.

Центрируют длинный контент без запаса: модалка выше экрана обрезается сверху, и кнопка закрытия становится недоступна.