Как отцентрировать элемент в CSS

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

Знаете ли вы, что способ зависит от контекста: что центрируем, по какой оси и известны ли размеры. Следом часто спрашивают, как отцентрировать по вертикали элемент неизвестной высоты или почему не сработал margin: 0 auto.

Как отвечать

Идите от простого к сложному:

• текст и строчные элементы: text-align: center на родителе;
• блок по горизонтали: margin-inline: auto при заданной ширине (width или max-width), иначе блок занимает всю строку и центрировать нечего;
• flexbox: display: flex; justify-content: center; align-items: center на контейнере. Отдельному потомку достаточно margin: auto, он встанет в центр по обеим осям;
• grid: display: grid; place-items: center, самая короткая запись для центра по двум осям;
• блок по вертикали без flex и grid: align-content: center во всех актуальных браузерах работает и на обычном блочном контейнере;
• абсолютное позиционирование: position: absolute; inset: 0; margin: auto при известных размерах или top: 50%; left: 50%; transform: translate(-50%, -50%), когда размеры неизвестны. Это для оверлеев и модалок, хотя нативный <dialog> в модальном режиме центрируется сам.

Отдельно скажите про высоту: вертикальный центр имеет смысл, только если у контейнера есть высота. Для экрана целиком берите min-height: 100dvh, а не 100vh: на мобильных 100vh считается по высоте со скрытой панелью адреса, и когда панель видна, центр уезжает вниз.

Хороший ответ заканчивается выбором: для раскладки flex или grid, для отдельного блока margin-inline: auto, абсолютное позиционирование только для слоёв поверх контента.

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

Ставят vertical-align: middle на блок. Это свойство работает для строчных элементов и ячеек таблиц, на обычном блоке оно ничего не делает.

Путают оси во flexbox. При flex-direction: column главная ось вертикальная, и justify-content центрирует уже по вертикали, а align-items по горизонтали.

Центрируют через transform и получают размытый текст на дробных пикселях или конфликт с анимацией, которая тоже задаёт transform и затирает сдвиг.