Какие существуют методы вертикального центрирования в CSS?

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

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