Используйте Flexbox с двумя выравниваниями, Grid с place-items:center либо абсолютное позиционирование с translate.
Есть контейнер, растянутый на всю ширину и высоту страницы. Внутри контейнера есть элемент 100x100 пикселей. Какими способами можно отцентрировать его по горизонтали и вертикали?
Используйте 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 не центрирует произвольный блок по вертикали.