Как центрировать блок по горизонтали и вертикали внутри другого блока с помощью flexbox

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

Вопрос простой на вид, и смотрят не на знание двух свойств, а на понимание осей: justify-content работает по главной оси, align-items по поперечной, и при flex-direction: column они меняются ролями. Ещё проверяют, помните ли вы, что вертикальное центрирование требует высоты контейнера. Продолжение почти всегда одно: а как то же самое сделать на Grid или вообще без flex.

Как отвечать

Дайте рецепт и сразу оговорите условия:

• контейнер: display: flex, justify-content: center, align-items: center;
• высота: центрировать не в чем, если высота контейнера равна высоте контента. Либо min-height: 100dvh для экрана целиком (dvh учитывает съезжающую панель браузера на мобильных, в отличие от vh), либо высота приходит от родителя;
• альтернатива: margin: auto на самом флекс-элементе центрирует его сразу по обеим осям, удобно когда контейнер общий, а по центру нужен один ребёнок;
• Grid: display: grid и place-items: center короче и не зависит от направления оси;
• без flex: position: absolute с inset: 0 и margin: auto, либо top: 50%, left: 50% и transform: translate(-50%, -50%) для случая, когда размеры элемента заранее неизвестны.

Стоит упомянуть align-content: center на обычном блочном контейнере: в 2024 году это разъехалось по всем движкам и позволяет центрировать по вертикали без перевода родителя во flex. Ещё про gap вместо отступов у детей и про то, что text-align: center на флекс-контейнере на сами флекс-элементы не действует.

Сильное завершение это оговорка про переполнение. align-items: center при контенте выше контейнера обрезает верхнюю часть, и доскроллить до неё нельзя. Лечится ключевым словом safe: align-items: safe center.

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

Ставят align-items: center и не понимают, почему ничего не сдвинулось. У контейнера высота по контенту, вертикали для центрирования просто нет.

Путают оси при flex-direction: column и начинают подбирать свойства наугад вместо того, чтобы назвать главную ось.

Забывают, что align-items: center отменяет растягивание по умолчанию, и элемент неожиданно сжимается по высоте до своего содержимого.