Вертикальное центрирование блока на веб-странице может работать несколькими способами: 1

1. С помощью свойства position. 1 Если разместить блок относительно браузера, то для вертикального центрирования достаточно поставить свойство top:50%. 1 Однако при таком подходе не учитываются размеры самого блока, в центре окажется только его верхняя граница. 1 Чтобы исправить это, нужно сместить блок вверх на половину его собственной высоты. 1 Для этого в значении top пишут функцию calc и вычисляют нужную высоту, отняв от 50% половину высоты блока. 1
2. С помощью свойства transform. 1 Если высота блока неизвестна, поможет свойство transform со значением translate, которое по оси Y сместит блок наполовину своей высоты (значение -50%). 1 По оси X всё останется как есть, если указать нулевое значение. 1
3. С помощью свойства flexbox. 1 Для этого задают для родительского элемента гибкий контейнер с свойствами display: flex и align-items: center. 12 Второе свойство отцентрирует весь контент внутри контейнера по вертикали. 2
4. С помощью ячеек таблицы. 2 В родительский элемент добавляют display: table-cell, чтобы блок вёл себя как ячейка таблицы, и vertical-align: middle — это свойство центрирует содержимое блока по вертикали. 2