Некоторые методы вертикального выравнивания блоков в CSS и их особенности:

• Использование padding. 1 Простой способ вертикального центрирования с помощью верхнего и нижнего padding. 1
• Применение line-height. 12 Если внутренний блок занимает не больше одной строчки, то можно воспользоваться этим свойством и задать его равным высоте внешнего блока. 25
• Использование позиционирования и свойства transform. 1 Одно из универсальных решений, когда не известны размеры родительского и дочернего элемента. 3 С помощью функции translate и значения -50% -50% можно сдвинуть внутренний блок в центр. 3
• Применение псевдоэлемента. 23 Универсальный способ, который может применяться, когда неизвестны высоты обоих блоков. 2 Суть в добавлении внутри внешнего блока строчного блока высотой в 100% и задания ему вертикального выравнивания. 23
• Использование Flexbox. 13 Позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. 3 Для центрирования нужно использовать свойства display: flex; и align-items: center; к родительскому контейнеру. 4

Выбор метода зависит от постановки задачи. 2 Например, для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height, а для абсолютно позиционированных элементов с известной высотой (например, иконок) — способ с отрицательным свойством margin-top. 2