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

1. Использование Flexbox. 1 Нужно установить свойства display: flex, justify-content: center и align-items: center. 1 Этот подход подойдёт независимо от объёма текста и адаптируется под различные экранные разрешения. 1
2. Центрирование однострочного текста с помощью line-height и text-align. 1 Для однострочного текста нужно задать line-height равным высоте контейнера. 1 Этот способ подходит, когда высота контейнера известна, и текст не переносится на следующую строку. 1
3. Эмуляция таблицы (метод table-cell). 1 Этот подход справляется с центрированием многострочного текста и работает даже со старыми версиями браузеров. 1
4. Метод transform. 1 Если высота элементов изменяется, можно применить свойство transform со значением translate. 2 Так текст останется центрированным, независимо от размера контейнера. 1
5. Выравнивание с помощью псевдоэлемента. 3 Это универсальный способ, который может применяться, когда неизвестны высоты обоих блоков. 3 Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. 3 В этом случае высота добавленного блока будет равна высоте внешнего блока. 3 Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока. 3