Как вертикально центрировать текст в div

Существует несколько эффективных методов вертикального центрирования текста внутри div с помощью CSS, при этом наиболее современным и рекомендуемым подходом является использование свойства CSS display: flex. Вы можете достичь вертикального центрирования, добавив display: flex и align-items: center в ваш существующий CSS, или используя метод CSS Grid, который обеспечивает отличную поддержку браузеров и особенно полезен для создания адаптивных макетов.

Содержание

• Традиционные методы CSS
• Современный метод CSS Flexbox
• Метод CSS Grid
• Метод с использованием line-height
• Метод table-cell
• Сравнение методов
• Рассмотрения совместимости с браузерами

Традиционные методы CSS

Абсолютное позиционирование с Transform

Этот метод использует абсолютное позиционирование в сочетании с CSS трансформациями:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
  position: relative;
}

#box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

#box span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Требуемая HTML-структура:

<div id="box">
  <span>Lorem ipsum dolor sit</span>
</div>

Этот метод хорошо работает, но требует дополнительной HTML-разметки и может быть сложным для простых задач центрирования.

Современный метод CSS Flexbox

Flexbox в настоящее время является наиболее рекомендуемым методом для вертикального центрирования благодаря своей простоте и широкой поддержке браузерами.

Базовая реализация Flexbox

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

Этот единственный подход одновременно обрабатывает как горизонтальное, так и вертикальное центрирование. Свойство align-items: center выравнивает элементы по вертикали, в то время как justify-content: center обрабатывает горизонтальное выравнивание.

Flexbox с несколькими строками

Для контента, который может переноситься на несколько строк:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px; /* Опционально: пространство между перенесенными строками */
}

Метод CSS Grid

CSS Grid предоставляет еще одно современное и элегантное решение для вертикального центрирования:

Базовая реализация Grid

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}

Свойство place-items: center является сокращенным свойством, которое одновременно устанавливает align-items и justify-items в значение center, делая его невероятно лаконичным.

Альтернативный метод Grid

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  align-items: center;
  justify-items: center;
}

Метод с использованием line-height

Этот метод хорошо работает для однострочного текста, но имеет ограничения для многострочного контента:

Реализация для однострочного текста

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
  line-height: 170px;
}

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

Модифицированный метод с line-height

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
  line-height: normal;
  display: inline-block;
  vertical-align: middle;
}

#box::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

Метод table-cell

Этот метод имитирует поведение традиционной табличной верстки:

Реализация

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

Этот подход обеспечивает хорошую совместимость, но может быть менее интуитивным, чем современные методы CSS, и может иметь последствия для производительности в сложных макетах.

Сравнение методов

Сводка рекомендаций

• Для современной веб-разработки: Используйте Flexbox (display: flex + align-items: center)
• Для макетов на основе сетки: Используйте CSS Grid (display: grid + place-items: center)
• Для однострочного текста: Используйте метод Line Height для простоты
• Для поддержки старых браузеров: Рассмотрите метод Table Cell

Рассмотрения совместимости с браузерами

Современные методы (Flexbox и Grid)

И Flexbox, и CSS Grid имеют отличную поддержку в современных браузерах:

• Flexbox: Поддерживается всеми современными браузерами, включая IE11+ с префиксами вендоров
• CSS Grid: Поддерживается всеми современными браузерами, включая IE10+ с префиксами вендоров

Поддержка старых браузеров

Для более старых браузеров, таких как Internet Explorer 8 и 9, могут потребоваться методы резервного копирования:

#box {
  /* Современные браузеры */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Резерв для IE9 */
  display: -ms-flexbox;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  
  /* Резерв для IE8 */
  display: table;
  vertical-align: middle;
}

Источники

1. MDN Web Docs - Использование CSS гибких коробок
2. CSS Tricks - Полное руководство по Flexbox
3. W3C CSS Grid Layout Module Level 1
4. Can I Use - Поддержка CSS Flexbox
5. Can I Use - Поддержка CSS Grid

Заключение

Вертикальное центрирование текста в div является распространенным требованием CSS с несколькими доступными решениями. Лучшим современным подходом является использование Flexbox со свойствами display: flex, align-items: center и justify-content: center, так как он обеспечивает отличную поддержку браузеров, простую реализацию и хорошо работает с адаптивными дизайнами.

Для вашего конкретного примера с черным div, содержащим белый текст, просто добавьте эти три свойства в ваш существующий CSS:

#box {
  /* Ваши существующие свойства */
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
  
  /* Добавьте эти для вертикального центрирования */
  display: flex;
  align-items: center;
  justify-content: center;
}

Это решение будет работать во всех современных браузерах и предоставляет наиболее поддерживаемый код для будущей разработки. Если вы работаете над проектом с конкретными требованиями к поддержке старых браузеров, рассмотрите возможность использования метода line-height для однострочного текста или метода table-cell в качестве опции резервного копирования.