Как разместить блок по центру внутри другого блока на CSS

Актуально на 2025 год

Просмотры: 168

Чтобы разместить блок по центру по вертикали внутри другого блока, можно использовать свойство display: flex; для родительского блока и свойства align-items: center; и justify-content: center; для дочернего блока. Вот пример кода:

<div style="display: flex; height: 300px; align-items: center; justify-content: center;">
  <div>Это блок, который будет по центру по вертикали</div>
</div>

<div>Это блок, который будет по центру по вертикали</div>

</div>

В этом примере свойство display: flex; для родительского блока создает flex-контейнер, а свойства align-items: center; и justify-content: center; для дочернего блока выравнивают его по центру по вертикали и горизонтали. Свойство height для родительского блока задает ему высоту, чтобы было видно, что дочерний блок действительно находится по центру по вертикали.

Посмотрите, как это выглядит, на примере. Всё достаточно просто!