Как выравнивать элементы по вертикали в CSS?

Для того, чтобы сделать вертикальное выравнивание в CSS необходимо определить родительский элемент, относительно которого будет выровнен дочерний элемент.

Во всех приведенных ниже способах будем использовать следующую разметку HTML:

<div class="parent">
<div class="child">Некоторый тект</div>
</div>

Вертикальное выравнивание через display: table

В этом способе нам просто нужно представить родителя в виде таблицы, а дочерний элемент — соответственно в виде ячейки этой таблицы. Тогда, задав свойство дочернему элементу vertical-align: middle, мы решаем нашу задачу.

.parent{display: table;
}
.child{display: table-cell;vertical-align: middle;
}

Выравнивание по вертикали с применением технологии Flex

Здесь все просто: указываем родителю свойство flex, и способы выравнивания. При этом дополнительные свойства дочернему элементу задавать не требуется.

.parent{display: flex;align-item: center;
     
     # Выравнивание по центру
     justify-content: center;
}

Технология Grid

Сегодня почти все современные браузеры поддерживают Grid, что делает возможным использование этой технологии в разработке своих приложений.

В случае с Grid вертикальное выравнивание работает также, как и во Flex.

.parent{display: grid;align-item: center;

     # Выравнивание по центру
     justify-content-: center;
}

Однако Grid позволяет сделать вертикальное и горизонтальное выравнивание используя только одно свойство place-items: center.

.parent{display: grid;place-items: center;
}

Grid и margin

Второй способ с использованием grid

.parent{display: grid;
}
.child{margin: auto;
}

Как выровнять элемент с абсолютным позиционированием?

В тех случаях, когда child является абсолютным, можно применить такой метод:

.parent{position: relative;
}
.child{position: absolute;left: 50%;transform: translateY(-50%);
}

Заключение

Безусловно существуют и другие способы решения, но в приведенные пять способов покроют 99% всех возникающих задач по вертикальному выравниванию. Если у Вас есть свои соображения, пишите, будет рады вашим коментариям. Также делитесь материалом с друзьями или коллегами в своих соцсетях.