F

2. Центрирование блока

Легко
centeringbeginner

Отцентрируйте блок по горизонтали и вертикали внутри контейнера с помощью CSS.

Каждый способ должен быть реализован независимо в своём контейнере:

  1. Блок .box должен быть отцентрирован горизонтально
  2. Блок .box должен быть отцентрирован вертикально

Вам дан контейнер .container размером 400×400px и дочерний блок .box размером 100×100px. Используйте CSS, чтобы разместить .box точно в центре .container. Контейнер уже имеет position: relative и серый фон. Блок .box имеет синий фон.

Примеры

Пример 3
Вход:
<div class="container"><div class="box"></div></div>
Ожидаемый результат:

Блок .box расположен в центре контейнера (150px, 150px)

Подсказка:

Flexbox с justify-content: center и align-items: center — самый простой способ центрирования

Ограничения

  • Нельзя менять HTML-разметку
  • Нельзя менять размеры контейнера и блока
0% принято
0 решений