Центрирование текста в блоке div: горизонтально и вертикально

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

Чтобы выровнять текст внутри div блока, примените следующие CSS свойства: display: flex;, justify-content: center; и align-items: center;. Пример CSS кода:

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

Примените этот код вместе с HTML:

<div class="center-flex">Текст, который требуется выровнять</div>

Благодаря такой настройке, ваш текст будет выравнен как горизонтально, так и вертикально.

Использование flexbox: современный подход

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

/* Flexbox – гибкий и сбалансированный подход, словно йога для вашего сайта. */
.center-flexbox {
   display: flex;
   justify-content: center;
   align-items: center;
}

Помните, что не все flex-контейнеры создаются одинаково. Если требуется эффектное центрирование содержимого в узком flex-элементе, не используйте flex: ..., предоставьте margin: auto полный контроль над ситуацией.

.shrink-wrap-center {
  margin: auto;
}

Для приложений с отзывчивым дизайном в "вечнозеленом" Internet Explorer наиболее надежен будет подход с использованием комбинации transform и position: relative.

Время-проверенные трюки: классические методы

Если вам ближе классические методы либо важна совместимость с различными браузерами, применяйте свойства position: relative; вместе с transform.

Вертикальное выравнивание многострочного текста или коррекция line-height для однострочного текста прекрасно справляются с задачей, но не забывайте правильно поставить высоту родительского div-блока. А для выравнивания ваших inline и block элементов используйте text-align: center; и margin: 0 auto;.

Вертикальное и горизонтальное: достижение баланса

У Flexbox есть интересная особенность: flex-direction: column; позволяет эффектно располагать элементы вертикально с одновременным центрированием. Если вы не используете flexbox, можно прибегнуть к display: table-cell и vertical-align: middle; – стабильный и проверенный подход.

.stack-vertically {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

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

Считайте процесс выравнивания текста как аккуратное расположение ступни в обуви.

Ваш текст (📝) – это ступня, блок div (👟) – это обувь.

Без центрирования:
👟
📝📏↔️📏

Идеально центрировано:
👟
  👟📝👟
👟👟👟👟

Центрирование текста в div-блоке аналогично расположению ступни в точном центре обуви — слева/справа, сверху/снизу.

Решения для специфических ситуаций

Каждая проблема связанная с выравниванием требует своего решения. Обсудим некоторые из них:

Динамический отзывчивый дизайн

Привязываясь к размерам вьюпорта, элементы гармонично масштабируются вместе с окном:

.center-viewport {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

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

Динамические высоты

Если высота вашего div-блока варьируется, использование transform обеспечит стабильную работу:

.center-dynamic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Отображение встроенного блока

Встроенные элементы удобно центрировать, настроив text-align:center; для родительских и vertical-align:middle; вместе с display:inline-block; для дочерних элементов:

.center-inline-block {
  text-align: center;
}
.center-inline-block span {
  display: inline-block;
  vertical-align: middle;
}

Сценарий с одной строкой

Для однострочного текста, настройка line-height в соответствии с высотой вашего div-блока обеспечит идеальный результат. С overflow: hidden; вы предотвратите возможные неожиданности.

.center-single-line {
  line-height: 100px;
  overflow: hidden;
}

Несколько советов для повышения точности

• При использовании процентов, обязательно установите размеры родительского элемента.
• Добавьте границу (1px solid silver;) для достижения визуального выравнивания.
• Выберите определенный цвет фона для наглядного демонстрирования позиционирования элементов.
• Проверьте стили родительского элемента. Использование высоты в 100% может усложнить ситуацию, если теги html или body не установили этот параметр.

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

1. Центрирование в CSS: Полное руководство | CSS-Tricks — обширный ресурс, затрагивающий все методики центрирования в CSS.
2. Как выровнять элемент по вертикали | W3Schools — практические примеры и разъяснения для вертикального центрирования.
3. Flexbox Froggy – Игра для изучения CSS flexbox — интерактивная игра для наработки понимания flexbox в игровом формате.
4. Grid Garden – Игра для изучения CSS grid layout — играя в эту игру, можно освоить основы CSS grid layout.
5. Что случается, когда вы создаете контейнер Flexbox? — Smashing Magazine — детальное изучение свойств и возможностей контейнеров flexbox.
6. CSS Grid Layout Мастер-класс – YouTube — видеокурс, представляющий экспресс-занятие по CSS Grid layout.