Как центрировать элементы по высоте?

Центрирование элементов по высоте (вертикальное центрирование)

Вертикальное центрирование — одна из наиболее частых задач в веб-разработке. Методы зависят от контекста: работаем мы с блочными элементами внутри родителя, с текстом/инлайн-элементами, или в рамках Flexbox/Grid системы. Я подробно разберу ключевые подходы.

1. line-height для однострочного текста

Для однострочного текста внутри элемента с фиксированной высотой (height) можно использовать свойство line-height, установив его равной высоте контейнера. Текст будет центрирован по вертикали.

.container {
  height: 100px;
  line-height: 100px; /* Совпадает с высотой */
}

⚠️ Ограничение: метод работает только для одной строки. Для многострочного текста приведёт к нежелательным промежуткам.

2. vertical-align для инлайн- и табличных элементов

Свойство vertical-align центрирует инлайн-элементы (например, inline-block, изображения) относительно линии текста родителя.

/* Для изображения внутри контейнера */
.container {
  height: 200px;
}
.container img {
  vertical-align: middle;
}

Важно: родительский контейнер также должен иметь display: inline-block или table-cell для корректной работы, либо мы можем использовать табличную модель.

3. Табличная модель (display: table и table-cell)

Использование CSS-таблиц — классический метод для вертикального центрирования, особенно когда высота родителя неизвестна.

.parent {
  display: table;
  width: 100%;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

4. Flexbox — современный и рекомендованный подход

CSS Flexbox значительно упрощает вертикальное центрирование. Для родительского контейнера устанавливаем display: flex и используем align-items.

.container {
  display: flex;
  align-items: center; /* Центрирует все флекс-элементы по вертикали */
  height: 300px; /* Высота должна быть задана или ограничена */
}

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

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

5. CSS Grid

CSS Grid предоставляет мощные инструменты для центрирования. Можно использовать align-items для оси столбцов (вертикаль) или размещать элемент в центре области.

.container {
  display: grid;
  align-items: center; /* Центрирует элементы по вертикали внутри их ячеек */
  height: 250px;
}

Для полного центрирования одного элемента:

.container {
  display: grid;
  place-items: center; /* Краткая запись для align-items и justify-items */
}

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

Для элементов с position: absolute внутри родителя с position: relative (или абсолютном) можно использовать комбинацию top: 50% и transform: translateY(-50%). Это смещает элемент на половину высоты родителя, а затем поднимает на половину своей собственной высоты для точного центрирования.

.parent {
  position: relative;
  height: 400px;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Этот метод работает даже когда высота ребёнка неизвестна, что делает его универсальным.

7. Метод с margin: auto и абсолютным позиционированием

Если высота ребёнка известна, можно использовать абсолютное позиционирование с top: 0, bottom: 0 и margin: auto. Это растянет пространство сверху и снизу, а margin: auto распределит его равномерно.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 150px; /* Фиксированная высота ребёнка */
}

Практические рекомендации и выбор метода

• Для современной вёрстки: предпочтительно использовать Flexbox или CSS Grid. Они созданы для управления распределением элементов и поддерживаются всеми современными браузерами.
• Если нужно поддержать очень старые браузеры: методы с таблицами (display: table) или абсолютным позиционированием (transform) могут быть более безопасными, но Flexbox теперь имеет широкую поддержку.
• Контекст важен:
  • Для центрирования текста в кнопке или ссылке — line-height.
  • Для центрирования изображения рядом с текстом — vertical-align.
  • Для центрирования блочного элемента в неизвестной высоте родителя — абсолютное позиционирование с transform.
  • Для комплексных интерфейсов с множеством элементов — Flexbox или Grid.

Пример с Flexbox для реального случая — карточка продукта:

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;   /* Центрирование по горизонтали */
  justify-content: center; /* Центрирование по вертикали внутри колонки */
  min-height: 400px;
  padding: 20px;
}

В итоге, выбор метода центрирования по высоте зависит от структуры HTML, требований к поддержке браузеров и динамичности содержимого. Начинайте с Flexbox, если нет особых ограничений — это наиболее мощный и понятный инструмент.