Flexbox: центрирование элементов

Flexbox позволяет центрировать элементы по горизонтали и вертикали одновременно с помощью justify-content: center и align-items: center.

Зачем нужно

До Flexbox центрирование по вертикали требовало хаков с line-height, абсолютным позиционированием или table-cell. Flexbox решает это двумя строками. Это один из первых паттернов при знакомстве с Flexbox и один из самых часто используемых.

Где используется

  • Hero-секция с центрированным контентом
  • Центрирование иконок в кнопках
  • Модальные окна (по центру viewport)
  • Заглушки empty state
  • Индикаторы загрузки

Основной контент

Базовое центрирование

.center {
  display: flex;
  justify-content: center; /* по главной оси */
  align-items: center;     /* по поперечной оси */
}

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

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

Через margin: auto

.container {
  display: flex;
  min-height: 300px;
}

.centered-item {
  margin: auto; /* Поглощает место со всех сторон */
}

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

.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}

/* Круглая кнопка */
.icon-btn-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

Модальное окно по центру viewport

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

.modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  max-width: 500px;
  width: calc(100% - 32px);
}

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

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

/* Grid (ещё короче) */
.grid-center {
  display: grid;
  place-items: center;
}

/* Абсолютное позиционирование */
.abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Частые ошибки

  • Нет высоты на контейнере — центрирование по вертикали не заметно если контейнер = высоте содержимого; нужна min-height
  • text-align: center вместо flex — text-align центрирует только инлайн-контент; для блоков нужен Flexbox/Grid
  • Оси меняются при flex-direction: column — justify-content становится вертикальным, align-items — горизонтальным

Связанные темы

Ресурсы