Вёрстка Junior Вёрстка на практике обновлено
Центрирование по обеим осям
Условие
.box должен стоять ровно по центру .stage и по горизонтали, и по вертикали. Размеры .box менять нельзя. Абсолютное позиционирование использовать нельзя.
Что проверяют тесты
по горизонтали
по вертикали
размеры не изменились
без абсолютного позиционирования
Как подойти
Самый частый вопрос по вёрстке на скрининге. Через flex это два свойства, через grid - одно (place-items: center). Назвать стоит оба, а заодно старый способ через absolute и transform: translate(-50%, -50%), который до сих пор встречается в чужом коде и работает без знания размеров.
Подсказки: 2
- Два свойства на родителе закрывают обе оси.
- align-items работает по поперечной оси, justify-content - по главной.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.