Есть контейнер, растянутый на всю ширину и высоту страницы. Внутри контейнера есть элемент 100x100 пикселей. Какими способами можно отцентрировать его по горизонтали и вертикали?

Используйте Flexbox с двумя выравниваниями, Grid с place-items:center либо абсолютное позиционирование с translate.

Короткий ответ

Что ответить на собеседовании

Используйте Flexbox с двумя выравниваниями, Grid с place-items:center либо абсолютное позиционирование с translate.

Подробный разбор

Ответ с пояснениями

Используйте Flexbox с двумя выравниваниями, Grid с place-items:center либо абсолютное позиционирование с translate.

Для контейнера достаточно display:flex; justify-content:center; align-items:center; min-height:100vh, а ребёнку — width и height по 100px. Альтернатива: display:grid; place-items:center. При absolute задайте родителю position:relative, ребёнку top/left:50% и transform:translate(-50%,-50%); обычный margin:auto не центрирует произвольный блок по вертикали.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее