Какие существуют техники вертикального выравнивания блоков в HTML?

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

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