Чтобы разместить блок по центру по вертикали внутри другого блока, можно использовать свойство display: flex;
для родительского блока и свойства align-items: center; и justify-content: center;
для дочернего блока. Вот пример кода:
1 2 3 |
<div style="display: flex; height: 300px; align-items: center; justify-content: center;"> <div>Это блок, который будет по центру по вертикали</div> </div> |
В этом примере свойство display: flex;
для родительского блока создает flex-контейнер, а свойства align-items: center; и justify-content: center;
для дочернего блока выравнивают его по центру по вертикали и горизонтали. Свойство height для родительского блока задает ему высоту, чтобы было видно, что дочерний блок действительно находится по центру по вертикали.
Посмотрите, как это выглядит, на примере. Всё достаточно просто!
Всем WEB!