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

Шпаргалка по центрированию в CSS — Flexbox, Grid, position absolute, margin auto — для разных ситуаций.

Задача

Отцентрировать элемент горизонтально, вертикально или в обоих направлениях. Нужен быстрый рецепт под конкретный контекст без гугла.

Решение

1. Flexbox — универсальный способ (рекомендуется)

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

Только по горизонтали:

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

Только по вертикали:

.container { display: flex; align-items: center; height: 300px; }

2. Grid — ещё короче

.container {
  display: grid;
  place-items: center; /* сокращение для align-items + justify-items */
  min-height: 100vh;
}

3. position: absolute — для наложенных элементов

.overlay {
  position: relative; /* родитель */
}

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

Работает когда элемент абсолютно позиционирован (loader, badge, модальное окно по центру экрана).

4. margin: auto — горизонтальное центрирование блока

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

Для контейнера контента — самый распространённый паттерн.

5. text-align: center — для строчного контента

.parent { text-align: center; }

Центрирует текст, <img>, <span>, <a> — только inline/inline-block элементы.

6. Вертикальное центрирование текста в одну строку

.btn {
  height: 44px;
  line-height: 44px; /* = height */
}
/* или */
.btn {
  display: flex;
  align-items: center;
  height: 44px;
}

7. position: fixed по центру экрана (модальное окно)

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

Ключевые моменты

  • Flexbox или Grid — первый выбор для большинства задач; поддерживаются везде.
  • place-items: center — удобное сокращение Grid; нет аналога в Flexbox (там два свойства).
  • transform: translate(-50%, -50%) для absolute/fixed — не нужен фиксированный размер элемента.
  • margin: 0 auto — только горизонтально, только для блочных элементов с заданной шириной.

Варианты

/* CSS 2024: одно правило центрирует всё */
.container {
  display: flex;
  align-content: center;
  justify-content: center;
}
/* или просто: */
.child { margin: auto; } /* в flex/grid контейнере */

Связанные рецепты / темы