Центрирование блока на всю высоту экрана
Вопрос
Какой вариант отцентрирует .modal по горизонтали и вертикали внутри .overlay, занимающего весь экран?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Варианты ответа
.overlay { text-align: center; vertical-align: middle; height: 100dvh; }.overlay { display: grid; place-items: center; min-height: 100dvh; }правильный ответ.modal { margin: auto; }без изменения.overlay.overlay { display: flex; align-content: center; }
Разбор
Грид с place-items: center центрирует детей по обеим осям, а min-height: 100dvh даёт высоту, в которой центрировать. text-align центрирует только строчный контент по горизонтали, а vertical-align на блоки не действует. margin: auto у обычного блока центрирует лишь по горизонтали (по вертикали работает во флекс- и грид-контейнере). align-content во флексе выравнивает строки при переносе, для одной строки нужен align-items, и горизонтального центрирования там тоже нет.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.