Как отцентрировать div произвольной ширины и высоты

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

Главное слово здесь «произвольной»: размеры блока неизвестны, поэтому старый приём с отрицательными отступами на половину ширины не подходит. Интервьюер хочет услышать современные способы и понимание их различий. Следом спрашивают, что будет, если блок больше родителя, или просят центрировать без flex и grid.

Как отвечать

Назовите несколько способов и скажите, когда какой уместен:

• Grid: у родителя display: grid; place-items: center. Самая короткая запись, place-items это сокращение для align-items и justify-items;
• Flexbox: display: flex; justify-content: center; align-items: center. Или у родителя display: flex, а у ребёнка margin: auto: автоматические отступы забирают свободное место со всех сторон;
• абсолютное позиционирование: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%). Проценты в translate считаются от размеров самого элемента, поэтому их знать не нужно. Подходит для модалок и оверлеев;
• без flex и grid: в актуальных браузерах align-content: center работает и в обычном блочном контейнере, это вертикаль. Горизонталь для блока с шириной по содержимому даёт width: fit-content; margin-inline: auto.

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

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

Не задают высоту родителю и удивляются, что вертикальное центрирование «не работает». Блок центрируется в контейнере высотой ровно с него самого.

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

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