Центрирование в CSS с Flexbox: все способы

Центрирование элементов — одна из самых частых задач в веб-вёрстке. До появления Flexbox разработчики использовали margin: auto, position: absolute с transform, таблицы или хак с display: inline-block. Flexbox решает эти задачи проще и предсказуемее. В этой статье рассмотрены все основные паттерны центрирования с Flexbox.

Базовое центрирование по обеим осям

Самый распространённый случай — центрирование одного или нескольких элементов по вертикали и горизонтали внутри контейнера:

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

• justify-content: center — выравнивание по главной оси (по умолчанию горизонтали)
• align-items: center — выравнивание по поперечной оси (по умолчанию вертикали)

Контейнер должен иметь фиксированную высоту (например, min-height: 100vh или height: 400px), иначе поперечная ось не будет иметь достаточной высоты для центрирования.

Центрирование по горизонтали

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

.row-centered {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

Элементы выстраиваются в ряд и центрируются по главной оси. gap добавляет отступы между элементами.

Центрирование по вертикали

Для центрирования по вертикали в одной строке:

.centered-vertically {
  display: flex;
  align-items: center;
  min-height: 200px;
}

Все flex-элементы выравниваются по центру поперечной оси. Контейнер снова должен иметь фиксированную высоту.

Центрирование при flex-direction: column

Когда главная ось вертикальная (flex-direction: column), роли меняются:

• justify-content: center — центрирование по вертикали
• align-items: center — центрирование по горизонтали

.centered-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Центрирование с несколькими элементами

При нескольких элементах они центрируются как группа:

.group-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

При flex-wrap: wrap при нехватке места элементы переносятся, но каждая строка остаётся центрированной.

Центрирование с отступами (padding)

Если контейнер имеет padding, центрирование учитывает его автоматически:

.centered-with-padding {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  box-sizing: border-box;
}

Центрирование с align-self

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

.container {
  display: flex;
  align-items: flex-start;
}

.centered-item {
  align-self: center;
}

Центрирование текста внутри flex-элемента

Flexbox выравнивает сами элементы, но не текст внутри них. Для центрирования текста внутри flex-элемента используйте text-align: center:

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

Или оберните текст в дополнительный блок и центрируйте его через Flexbox:

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

Центрирование с flex-grow

Когда один элемент должен занимать всё доступное пространство, а остальные — оставаться по центру:

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-left {
  flex: 1;
  text-align: left;
}

.header-center {
  flex: 0 0 auto;
}

.header-right {
  flex: 1;
  text-align: right;
}

Центральный элемент не растёт, боковые занимают равное пространство.

Центрирование в модальном окне

Типичный паттерн для модалки — центрирование по экрану:

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal {
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

Центрирование с учётом прокрутки

Если контент может быть выше viewport, используйте min-height и overflow:

.scrollable-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  box-sizing: border-box;
}

.scrollable-centered > * {
  max-width: 100%;
}

При переполнении содержимое прокручивается, но остаётся центрированным по возможности.

Центрирование с flex-wrap и align-content

При нескольких строках (flex-wrap: wrap) и необходимости центрировать группы строк по вертикали:

.multi-row-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 1rem;
  min-height: 100vh;
}

align-content: center центрирует все строки как блок по поперечной оси.

Инструменты для экспериментов

Для быстрой проверки и отладки центрирования используйте Flexbox Playground на rechecker.ru. Инструмент позволяет менять justify-content, align-items, flex-direction и сразу видеть результат.

Сравнение с другими методами

Метод	Горизонталь	Вертикаль	Обе оси	Комментарий
Flexbox	justify-content: center	align-items: center	Оба	Рекомендуемый способ
Grid	place-items: center	—	—	Один контейнер
margin: auto	Да (блок)	Нет	Нет	Только горизонталь для блочных элементов
position + transform	Да	Да	Да	Работает, но требует position

Типичные ошибки

1. Забытая высота контейнера — без min-height или height у контейнера вертикальное центрирование не работает, так как поперечная ось не имеет размера.

2. Путаница осей при column — при flex-direction: column главная ось вертикальная, justify-content управляет вертикальным выравниванием.

3. Центрирование текста — Flexbox центрирует элементы, а не текст. Для текста внутри элемента используйте text-align: center или вложенный flex-контейнер.

Центрирование в RTL-контексте

При direction: rtl или атрибуте dir="rtl" направление главной оси меняется. Центрирование остаётся корректным: justify-content: center и align-items: center работают с учётом направления.

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

Центрирование с aspect-ratio

Для центрирования квадратного или прямоугольного контента с сохранением пропорций:

.centered-square {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  max-width: 400px;
  max-height: 400px;
}

Центрирование и доступность

При центрировании модальных окон и overlay убедитесь, что фокус остаётся внутри модалки (focus trap) и что скринридеры корректно объявляют структуру. Flexbox не влияет на доступность напрямую, но центрированный контент должен быть правильно размечен (роли, aria-атрибуты).

Дополнительные материалы

Подробное руководство по всем свойствам Flexbox — в статье CSS Flexbox: полное руководство с примерами. Сравнение Flexbox и CSS Grid для разных случаев — в Flexbox vs CSS Grid: когда что использовать.

---

Центрирование с flex-wrap

При flex-wrap: wrap и нескольких строках align-content: center центрирует все строки по вертикали:

.wrapped-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 1rem;
  min-height: 100vh;
}

Центрирование с margin: auto

На flex-элементе margin: auto поглощает свободное пространство. Для центрирования одного элемента в контейнере:

.centered-single {
  display: flex;
  min-height: 100vh;
}

.centered-single > * {
  margin: auto;
}

Центрирование с gap

gap не влияет на центрирование — он добавляет отступы между элементами. Центрирование задаётся justify-content и align-items.

Браузерная совместимость

Flexbox с justify-content: center и align-items: center поддерживается во всех современных браузерах. Для IE10–11 могут потребоваться префиксы -ms-.