Какие варианты центрирования div существуют в CSS?

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

Знаете ли вы современный набор способов и понимаете ли разницу между ними, а не помните ли один заученный приём. Следом почти всегда идёт уточнение: а если высота элемента заранее неизвестна, а если контент выше контейнера.

Как отвечать

Разложите по механизмам, от актуального к историческому.

• flex: display: flex; justify-content: center; align-items: center у родителя. Внутри флекс-контейнера работает и margin: auto на ребёнке, оно центрирует сразу по обеим осям;
• grid: display: grid; place-items: center центрирует содержимое ячейки, place-content: center центрирует всю сетку целиком. Разница видна, когда треков больше одного;
• блочная раскладка: align-content: center теперь работает и без флекса с гридом, обычному блоку с заданной высотой хватает одной строки для вертикального центрирования. Поддержка во всех актуальных браузерах есть с 2024 года;
• горизонталь блока: margin-inline: auto при ограниченной ширине, логическая замена привычному margin: 0 auto;
• абсолютное позиционирование: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) работает при неизвестных размерах, а вариант inset: 0; margin: auto требует заданных ширины и высоты. Родителю в обоих случаях нужен position: relative;
• одна строка текста: text-align: center и равные вертикальные отступы. Приём с line-height в высоту блока годится ровно для одной строки.

Две практические детали. Высота 100vh на мобильных прыгает вместе с панелью браузера, поэтому берут 100dvh или min-height: 100svh. А align-items: safe center не даёт обрезать содержимое, которое выше контейнера: при обычном центрировании верхняя часть уезжает за край, и прокрутить до неё нельзя.

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

Задают height вместо min-height и при длинном контенте получают обрезанный блок вместо растущего.

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

Тянут display: table-cell с вертикальным выравниванием из старых статей. Работает, но в 2026 году это сигнал, что человек давно не заглядывал в спецификацию.