Как центрировать что угодно с помощью современного CSS

Центрирование в CSS имеет репутацию более сложной задачи, чем должно быть. Вы пробуете text-align: center на div, ничего не двигается. Добавляете margin: auto, элемент центрируется горизонтально, но не вертикально. Ищете решение, находите пять разных ответов, и ни один из них не объясняет, почему они работают.

Настоящая проблема в том, что CSS имеет несколько контекстов компоновки, и каждый из них обрабатывает выравнивание по-разному. Как только вы поймёте, в каком контексте работаете, центрирование станет простым. Вот что действительно работает сегодня.

Сначала разберитесь с контекстом компоновки

Перед выбором техники задайте один вопрос: какую систему компоновки использует родительский элемент?

Центрирование ведёт себя по-разному в обычном потоке (flow layout), Flexbox и Grid. Применение неправильного метода в неправильном контексте — вот почему центрирование кажется непоследовательным. Три сценария, с которыми вы столкнётесь чаще всего:

• Центрирование встроенного контента (текст, ссылки) внутри блока
• Горизонтальное центрирование блочного элемента внутри родителя
• Центрирование элемента как по горизонтали, так и по вертикали

Центрирование встроенного контента с помощью text-align

Для текста, ссылок и других встроенных элементов достаточно text-align: center на родителе:

.card-header {
  text-align: center;
}

Это влияет только на встроенный контент внутри контейнера. Это не сдвинет сам контейнер. Распространённая ошибка — применять text-align: center, ожидая, что div сместится — этого не произойдёт.

Горизонтальное центрирование с помощью margin-inline: auto

Чтобы центрировать блочный элемент горизонтально внутри родителя, используйте автоматические отступы. Современный способ записи использует логические свойства:

.content {
  width: 680px;
  margin-inline: auto;
}

margin-inline: auto эквивалентно margin-left: auto; margin-right: auto, но учитывает направление письма, что важно для интернационализированных макетов. Это правильный инструмент для центрирования обёрток страниц, контейнеров статей и форм. Элемент должен быть уже своего контейнера, чтобы оставалось горизонтальное пространство для распределения автоматических отступов.

Центрирование с помощью CSS Flexbox: горизонтально и вертикально

Flexbox — наиболее практичная современная техника центрирования в CSS для выравнивания элементов внутри контейнера, особенно когда у вас несколько дочерних элементов или нужен контроль направления:

.container {
  display: flex;
  justify-content: center; /* горизонтально */
  align-items: center;     /* вертикально */
  min-height: 100dvh;
}

Примечание: Используйте min-height: 100dvh вместо height: 100vh для макетов на весь viewport. Единица dvh учитывает динамический интерфейс браузера на мобильных устройствах (адресные строки, панели инструментов), что 100vh не обрабатывает корректно. Динамические единицы viewport теперь широко поддерживаются в современных браузерах, отслеживается на https://webstatus.dev/features/viewport-unit-variants.

justify-content управляет выравниванием вдоль главной оси. align-items управляет поперечной осью. Вместе они центрируют любой дочерний элемент независимо от его размеров. Это правильный выбор, когда вы центрируете несколько элементов или нужен контроль промежутков и направления.

Центрирование с помощью CSS Grid: кратчайший путь

Для центрирования одного элемента внутри контейнера CSS Grid с place-items — наиболее лаконичный вариант:

.wrapper {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

place-items: center — это сокращение для align-items: center и justify-items: center. Оно центрирует дочерний элемент по обеим осям в двух объявлениях. Если вам нужно центрировать только один элемент и не нужна сложная логика компоновки, это самый чистый подход.

Вы также можете применить центрирование со стороны дочернего элемента, используя place-self: center или margin: auto на элементе сетки, что полезно, когда вы не контролируете CSS родителя.

Какой метод следует использовать?

Заметка о новых возможностях CSS

CSS Anchor Positioning позволяет выравнивать элемент относительно другого конкретного элемента — полезно для всплывающих подсказок, поповеров и прикреплённого UI. Эта функция недавно стала доступна в современных браузерах и отслеживается на https://webstatus.dev/features/anchor-positioning. Однако для общего центрирования страниц Flexbox и Grid остаются надёжным стандартом, который разработчики используют сегодня.

Заключение

Центрирование в CSS перестаёт быть раздражающим, как только вы сопоставите технику с контекстом компоновки. Используйте margin-inline: auto для горизонтальной компоновки в обычном потоке, Flexbox при выравнивании нескольких элементов и Grid place-items: center, когда вам просто нужно что-то посередине. Это охватывает подавляющее большинство того, с чем вы столкнётесь в реальной фронтенд-разработке.

Часто задаваемые вопросы

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.