Горизонтальное центрирование элемента div в CSS

Быстрый ответ

В случае, когда вам нужно отцентрировать дочерний элемент горизонтально, примените к родительскому элементу display: flex; и justify-content: center;:

#outer {
  display: flex;           /* Включаем флексбокс 💪 */
  justify-content: center; /* Указываем центр, как на компасе */
}

Если у дочернего элемента установлена ширина, его можно отцентрировать с помощью margin: 0 auto;:

#inner {
  margin: 0 auto;     /* Включаем автопилот и следуем в центр */
  width: 50%;         /* Будто мы готовы наполовину 😉 */
}

Всего пару строк CSS позволяют просто центрировать элементы.

Flexbox на практике

Flexbox – это удобная модель размещения элементов, которая обеспечивает отличный контроль над выравниванием и распределением элементов внутри контейнера. Она одинаково эффективно подходит как для горизонтального, так и для вертикального центрирования:

#outer {
  display: flex;
  justify-content: center; /* Центрируемся... горизонтально */
  align-items: center;     /* ... и вертикально тоже */
  height: 100%;            /* Указываем высоту только при необходимости */
}

Альтернативные методы для устаревших браузеров

К сожалению, flexbox не поддерживается всеми старыми браузерами. Если вашим пользователям приходится использовать IE8 или IE9, центрирование можно выполнить с помощью display: table и display: table-cell:

#outer {
  display: table;
  width: 100%; /* Заполняем всё доступное пространство */
}

#inner {
  display: table-cell;
  text-align: center; /* Как босс, контролируем ячейку из центра */
  vertical-align: middle; /* Наш босс знает себе цену – он не высокомерен, но и не скромничает */
}

Абсолютное позиционирование и трансформации – своеобразный обходной путь

Сочетание position: absolute с процедурами трансформации CSS – эффективное решение для центрирования элементов:

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;                            /* Уже на половине пути... */
  transform: translateX(-50%);           /* ... И вуаля! Мы в центре! */
}

Клуб "Лентяев ширины"

Для любителей центрирования, которые не волнуются о заранее определенной ширине, есть удобный метод:

#inner {
  margin: auto;
  position: absolute;
  left: 0; right: 0;    /* Равное расстояние с обеих сторон */
}

Визуализация

Центрирование элемента HTML можно представить как балансирование на качелях (⚖️):

До центрирования:
📦 ➡️................⚖️................➡️ 📦
(Элемент с одной стороны, пустое пространство – с другой)

После центрирования:
.................⚖️📦⚖️..................
(Элемент **идеально сбалансирован** в центре пространства)

Важное свойство CSS: margin: auto;

.element-to-center {
  display: block;  /* Занимаем пространство */
  width: 50%;      /* Наполняемся наполовину */
  margin: 0 auto;  /* Равновесие обеспечивается здесь */
}

Центрирование по горизонтали достигнуто! 🌟

Когда мельчайшие детали имеют значение

Для элементов с фиксированной шириной можно применить следующие стили:

#inner {
  width: 200px; /* Ширина определяется настроением */
  position: absolute;
  left: 50%; 
  margin-left: -100px; /* Упс, половина осталась дома */
}

Для элементов с переменной шириной, transform может компенсировать смещение:

#inner {
  position: absolute;
  left: 50%; 
  transform: translateX(-50%); /* Грациозно перемещаемся в центр */
}

Для сложных макетов может потребоваться сочетание разных методов:

#outer {
  display: flex;
  flex-direction: column; /* Будьте добры, выстроиться в ряд */
  align-items: center; /* Все элементы выравниваются по центру, при этом игра идет по равным правилам */
  text-align: center; /* ТЕКСТ остается в ЦЕНТРЕ, как на поле в летнем лагере */
}

#inner {
  display: inline-block; /* Объединяемся в единую цепочку */
  margin: 0 auto; /* Путь к центру лишен препятствий. Переживать не стоит, мы на автопилоте */
}

Полезные материалы

1. Методы центрирования в CSS | CSS-Tricks — руководство по различным способам центрирования элементов с помощью CSS.
2. Центрирование элемента – CSS: Cascading Style Sheets | MDN — представление Mozilla Developer Network о техниках центрирования, используя CSS.
3. Макет CSS – Горизонтальное и вертикальное выравнивание | W3Schools — пошаговые уроки по выравниванию в CSS, включая центрирование по горизонтали.
4. html – Отличия в отображении высоты в Chrome и Firefox – Stack Overflow — демонстрация центрирования при помощи flexbox на реальных примерах использования браузера.
5. Как центрировать любой элемент с помощью CSS – выравнивание div, текста и прочего | FreeCodeCamp — доступное руководство от FreeCodeCamp по центрированию различных элементов с использованием CSS.
6. html – Как отцентрировать элемент с "position: absolute" – Stack Overflow — советы сообщества Stack Overflow на тему центрирования элементов с помощью абсолютного позиционирования.
7. Flexbox | Codrops — подробное объяснение модели размещения элементов Flexbox с примерами.