Приведи пример центрации div с помощью CSS

Центрирование <div> с помощью CSS: Ключевые подходы

В CSS существует несколько эффективных методов центрирования элементов, выбор которых зависит от типа центрирования (горизонтальное, вертикальное или оба) и контекста разметки. Рассмотрим основные практические примеры.

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

Для блочных элементов с известной шириной классическим методом является использование автоматических боковых отступов.

.centered-block {
  width: 300px; /* Фиксированная или процентная ширина */
  margin-left: auto;
  margin-right: auto;
  /* margin: 0 auto; - краткая запись */
}

Этот метод работает, потому что auto заставляет браузер распределять доступное пространство равномерно по бокам.

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

<div class="container">
  <div class="inline-centered">Центрированный инлайн-блок</div>
</div>

.container {
  text-align: center; /* Центрирует дочерние инлайн/инлайн-блочные элементы */
}
.inline-centered {
  display: inline-block;
  /* Ширина может быть любой */
}

2. Центрирование по горизонтали и вертикали (абсолютное центрирование)

Метод с абсолютным позиционированием и трансформацией — современный и гибкий способ, не требующий знания размеров элемента.

.parent {
  position: relative; /* Обязательно! Создает контекст позиционирования */
  min-height: 400px; /* Для наглядности */
}

.child {
  position: absolute;
  top: 50%;  /* Сдвигает верхний край до 50% высоты родителя */
  left: 50%; /* Сдвигает левый край до 50% ширины родителя */
  transform: translate(-50%, -50%); /* Смещает элемент обратно на половину его собственных размеров */
  /* Ширина и высота могут быть любыми, даже неизвестными */
}

Альтернативный метод с абсолютным позиционированием и margin: auto хорошо работает, если размеры элемента известны.

.child-fixed-size {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

3. Современные методы с Flexbox

Flexbox — наиболее мощный и рекомендуемый инструмент для центрирования в современной верстке.

.flex-container {
  display: flex;
  justify-content: center; /* Горизонтальное центрирование */
  align-items: center;     /* Вертикальное центрирование */
  min-height: 400px; /* Высота контейнера важна для вертикального центрирования */
}

/* Любой .flex-container > div будет идеально центрирован */

Для центрирования только одного из flex-элементов можно использовать margin: auto, так как во flex-контейнере автоматические отступы поглощают все свободное пространство.

.flex-container-single {
  display: flex;
}
.centered-in-flex {
  margin: auto; /* Центрирует элемент и по горизонтали, и по вертикали */
}

4. Современные методы с CSS Grid

CSS Grid предлагает очень лаконичный способ центрирования в одну строку.

.grid-container {
  display: grid;
  place-items: center; /* Краткая запись для justify-items и align-items */
  min-height: 400px;
}

/* Или для центрирования одного элемента внутри грид-ячейки */
.grid-container-alt {
  display: grid;
}
.centered-in-grid {
  justify-self: center; /* Горизонтально в своей ячейке */
  align-self: center;   /* Вертикально в своей ячейке */
}

Критерии выбора метода

• Простое горизонтальное центрирование блока → margin: 0 auto
• Центрирование инлайн-контента → text-align: center для родителя
• Абсолютное центрирование элемента с неизвестными размерами → метод с transform: translate(-50%, -50%)
• Центрирование внутри области просмотра (viewport) → использовать vh/vw единицы или фиксированное позиционирование
• Современные макеты, поддержка IE10+ → Flexbox (предпочтительный выбор в 95% случаев)
• Сложные макеты с одновременным выравниванием по сетке → CSS Grid

Важное замечание: При использовании Flexbox и Grid убедитесь, что контейнер имеет достаточные размеры (высоту) для вертикального центрирования. Элемент центрируется внутри отведенной ему области, а не относительно всей страницы. Для центрирования относительно окна браузера можно использовать height: 100vh для контейнера или фиксированное/абсолютное позиционирование.