Некоторые техники вертикального выравнивания блоков в HTML:

• Выравнивание с помощью вертикальных отступов. 1 Применяется, если известны высоты внутреннего и внешнего блока. 1 Выравнивание задаётся с помощью вертикальных отступов у внутреннего блока, используя формулу: (высота внешнего блока — высота внутреннего блока) / 2. 1
• Выравнивание с помощью line-height. 1 Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. 1
• Выравнивание с помощью отрицательного свойства margin-top. 1 Применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего. 1 Нужно задать внешнему блоку относительное позиционирование, а внутреннему — абсолютное. 1 Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока и поднять вверх на половину собственной высоты. 1
• Выравнивание с помощью transform. 1 Этот способ применяется, когда высота внутреннего блока неизвестна. 1 В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50%. 1
• Выравнивание с помощью псевдоэлемента. 2 Удобное решение для оформления, например, фотогалерей. 2 Идея решения в добавлении внутри внешнего блока строчного блока высотой в 100% и задания ему вертикального выравнивания. 2 В этом случае высота добавленного блока будет равна высоте внешнего блока, а внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока. 2
• Выравнивание с помощью Flexbox. 2 Это свойство позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. 2