Как отцентрировать div в CSS

Отцентрировать элемент по центру — классическая задача в CSS, над которой спотыкались все верстальщики. Сегодня она решается легко благодаря flexbox. Разберём рабочие способы.

Лучший способ — flexbox

Современное и самое простое решение. Задайте контейнеру три свойства:

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

Всё, что внутри, окажется по центру и по горизонтали, и по вертикали. Это работает почти во всех браузерах и подходит для большинства случаев.

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

Если нужно центрировать блок с заданной шириной лишь по горизонтали, классика — авто-отступы:

.block {
  width: 300px;
  margin: 0 auto;
}

Для строчного содержимого (текст, картинки) подойдёт text-align: center у родителя.

Через Grid — тоже одной строкой

Если контейнер — грид, центрировать содержимое можно ещё короче:

.container {
  display: grid;
  place-items: center;
}

Абсолютное позиционирование

Когда элемент нужно центрировать поверх другого (например, модальное окно), помогает связка position и transform:

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

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

• Путают, кому задавать свойства: flex-свойства идут контейнеру, а не самому элементу.
• Используют устаревшие хаки там, где хватает flexbox.
• Забывают, что margin: auto по горизонтали работает только с заданной шириной.

Что запомнить

Самый надёжный способ центрировать по обеим осям — flexbox на контейнере: display:flex; justify-content:center; align-items:center. Для гридов есть place-items:center. Только по горизонтали блок центрирует margin: 0 auto. Для наложения поверх используйте position + transform. Flexbox заменил все старые хитрости.

Коротко: вопросы и ответы

Самый простой способ? Flexbox: три свойства на контейнере центрируют по обеим осям.

Почему не центрируется? Часто свойства заданы элементу вместо контейнера, либо у блока нет ширины для margin:auto.

Что для модального окна? position:absolute + top/left 50% + transform translate(-50%, -50%).

Ещё пара полезных приёмов

Если нужно центрировать только по вертикали, оставьте на flex-контейнере align-items: center без justify-content. Для нескольких элементов в столбик по центру добавьте контейнеру flex-direction: column. А иконку и подпись внутри кнопки удобно ровнять связкой display:flex и gap.

Почему flexbox иногда «не центрирует» по вертикали? Частая причина — у контейнера нет высоты, поэтому центрировать не в чем; задайте ему высоту, например min-height.

Grid или flex? Для одного элемента подойдёт любой; place-items:center у грида — самый короткий вариант.

Работает ли flexbox во всех браузерах? Да, во всех современных; это стандартный и надёжный способ центрирования сегодня.