Несколько методов вертикального выравнивания элементов в HTML:

1. Выравнивание с помощью вертикальных отступов. 1 Подходит, если известны высоты внутреннего и внешнего блока. 1 Выравнивание задаётся с помощью вертикальных отступов у внутреннего блока, используя формулу: (высота внешнего блока — высота внутреннего блока) / 2. 1
2. Выравнивание с помощью line-height. 1 Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. 1 Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden. 1
3. Выравнивание с помощью псевдоэлемента. 1 Это универсальный способ, который может применяться, когда неизвестны высоты обоих блоков. 1 Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. 1 В этом случае высота добавленного блока будет равна высоте внешнего блока. 1 Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока. 1
4. Выравнивание с помощью Flexbox. 12 Для этого нужно установить свойства display: flex, justify-content: center и align-items: center. 2
5. Эмуляция таблицы. 2 Если Flexbox не поддерживается браузером (обычно это старые версии), можно применить этот метод. 2 Для вертикального выравнивания нужно присвоить свойствам width и height родительского элемента значение 100% и добавить display: table. 3 В дочернем элементе изменить значение display на table-cell и добавить vertical-align: middle. 3