Способы центрирования в CSS
Вопрос
Какими способами можно отцентрировать блок по горизонтали и вертикали? Когда какой выберешь?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Грид: `display: grid; place-items: center`
Флекс: `justify-content: center; align-items: center`
У родителя должна быть высота, иначе по вертикали центрировать некуда
Абсолютное позиционирование: `inset: 0; margin: auto` при заданных размерах или `translate(-50%, -50%)`
`margin: 0 auto` только по горизонтали для блока с шириной
Что могут спросить следом
- Как отцентрировать модалку поверх страницы?
- Почему
translate(-50%, -50%), а не отрицательные margin?
Разбор
Самый короткий способ - грид на родителе: display: grid; place-items: center. Флекс делает то же через justify-content и align-items, его беру, если в контейнере несколько элементов в ряд. Важно, чтобы у родителя была высота, например min-height: 100dvh, иначе по вертикали центрировать некуда. Если элемент должен лежать поверх контента, как модалка, позиционирую абсолютно или фиксированно: inset: 0; margin: auto при известных размерах или top: 50%; left: 50%; transform: translate(-50%, -50%) при неизвестных, ведь проценты в translate считаются от размеров самого элемента. Для простого горизонтального центрирования блока с шириной хватает margin-inline: auto.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.