Как работает вертикальное центрирование элементов в HTML?

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

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