Центровка текста по вертикали в CSS: методы и решения

Быстрый ответ

Для вертикального центрирования текста лучше всего использовать Flexbox: установите свойства display: flex;, justify-content: center; и align-items: center;:

.centered-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 170px;
  background: black;
  color: white;
  font-size: 48px;
}

Примените этот CSS код к нужному элементу:

<div class="centered-text">Текст по центру</div>

Данный подход подойдет независимо от объёма текста и адаптируется под различные экранные разрешения.

Другие способы вертикального центрирования

Центрирование однострочного текста: lineHeight и textAlign

Для однострочного текста задайте line-height равным высоте контейнера:

div {
  height: 100px;
  line-height: 100px; /* Две половины дают целое! */
  text-align: center; /* Замечательное центрирование текста */
}

Этот способ идеально подходит, когда высота контейнера известна, и текст не переносится на следующую строку.

Подробнее об этом расскажет наш спикер на видео

Совместимость со старыми браузерами: метод table-cell

Если Flexbox не поддерживается браузером (обычно это старые версии), можно применить эмуляцию таблицы:

div {
  display: table; /* Мы стали эмуляцией таблицы */
}

span {
  display: table-cell; /* Текст становится ячейкой таблицы */
  vertical-align: middle; /* На пути к середине! */
  text-align: center; /* Всё равномерно, без излишней пристрастности */
}

<div>
  <span>Центрированный текст</span>
</div>

Этот подход великолепно справляется с центрированием многострочного текста и работает даже со старыми версиями браузеров.

Динамическая высота: метод transform

Если высота ваших элементов изменяется, можно применить:

div {
  position: relative; /* Определяем позицию элемента */
}

span {
  position: absolute; /* Свободное позиционирование */
  top: 50%; /* Для достижения середины */
  transform: translateY(-50%); /* Небольшой поворот для выравнивания */
  left: 0;
  right: 0;
  text-align: center; /* Выравниваем текст по центру */
}

Путём применения этого метода текст останется центрированным, независимо от размера контейнера.

Вертикальное расположение: колонка Flexbox

Если требуется вертикальное расположение элементов, сделайте следующее:

div {
  display: flex;
  flex-direction: column; /* Переделываемся в колонку */
  justify-content: center; /* Выравниваем элементы по центру */
  height: 300px; /* Устанавливаем высоту */
}

Данный метод идеально подойдет для создания колоночного макета, где каждый дочерний элемент размещён равномерно и центрирован.

Использование префиксов для поддержки браузеров: все браузеры важны

Не забывайте добавлять префиксы Flexbox, чтобы гарантировать корректное восприятие вашего кода всеми браузерами:

.centered-text {
  display: -webkit-flex; /* Safari подключается к использованию flex */
  display: flex;
  /* Прочие свойства с префиксами */
}

Убедитесь в поддержке всех браузеров на сайтах вроде caniuse.com, и используйте различные инструменты, например, flexyboxes для поддержки совместимости вашего кода при использовании Flexbox.

Визуализация

Представьте, что ваш текст – это 👤, который хочет получить лучший вид из центра вашей веб-страницы, наподобие небоскреба 🏢.

🏢               🏢
|    []  []     |   |    🛗     |
|    []  []     |   |   👤      |
|    []  []     | ➡️ |    🛗     |
🏢               🏢
# Изначально  ➡️  После применения CSS

Чтобы обеспечить 👤 лучшую перспективу, используйте CSS:

.elevator { /* Ваш родительский элемент (🛗) */
  display: flex;
  align-items: center; /* Вертикальное центрирование */
  justify-content: center; /* Горизонтальное центрирование */
}

Вуаля! Текст теперь центрирован по обеим осям, открывая великолепный обзор для посетителей вашей веб-страницы 🎉.

Использование миксинов для повторного использования кода

Создавайте SASS/SCSS миксины для повторного использования стилей вертикального центрирования в разных проектах:

@mixin vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  @include vertical-center; /* Делаем элемент центрированным */
}

Оформление и стилистика

Придайте индивидуальность вашему центрированному элементу с помощью визуальных параметров:

div {
  height: 90px;
  width: 270px;
  background: #000; /* Черный цвет для заднего фона */
  color: #FFF; /* Белый цвет текста */
  margin: 10px; /* Небольшие отступы для эффекта */
}

Правильные размеры и отступы могут значительно улучшить внешний вид элемента.

Обучение на примерах

На CodePen и JSFiddle вы найдете образцы кода для просмотра и обучения. Пишите код и наблюдайте его работу вживую!

Полезные материалы

1. Centering in CSS: A Complete Guide | CSS-Tricks – CSS-Tricks — Полное руководство по центрированию в CSS.
2. Basic concepts of flexbox – CSS: Cascading Style Sheets | MDN — Официальная документация по Flexbox.
3. CSS Flexbox (Flexible Box) — Статья по центрированию текста с помощью CSS Flexbox.
4. How can multiple threads (parallel testcases) access same excel file at the same time using Apache POI in Java (Selenium) setup? – Stack Overflow — Ответы на популярные вопросы.
5. A Visual Guide to CSS3 Flexbox Properties | DigitalOcean — Визуальное руководство по свойствам Flexbox для центрирования текста.