Для вертикального центрирования элементов в HTML можно использовать следующие методы:

1. Свойство position. 1 При абсолютном позиционировании блока для вертикального центрирования нужно сместить блок вверх на половину его собственной высоты. 1 Для этого в значении top пишут функцию calc и вычисляют нужную высоту, отняв от 50% половину высоты блока. 1
2. Свойство transform. 1 Если высота блока неизвестна, поможет свойство transform со значением translate, которое по оси Y сместит блок наполовину своей высоты (–50%). 1
3. Свойство flexbox. 14 Для этого задают для родительского контейнера гибкий контейнер с свойствами display: flex и align-items: center. 4 В результате, как бы ни растягивали браузер, элементы всегда будут оставаться в центре. 1
4. Свойство grid. 1 Современный способ выравнивания, который в целом похож на flexbox. 1 Для этого используют свойства display: grid, justify-content: center и align-items: center. 14