Центрирование элементов в CSS: справочник современных и классических методов (2026)

1. Центрирование строчных и строчно-блочных элементов: text-align

Этот способ знаком каждому, кто хоть раз форматировал текст. Свойство text-align: center, применённое к родительскому блоку, выравнивает весь строчный контент внутри него по центру: текст, кнопки, ссылки, изображения с display: inline или inline-block. Просто, надёжно и работает везде, даже в IE 6.

<style>
.text-center {
  text-align: center;
}
</style>

<div class="text-center">
  <span>Центрированный текст</span>
  <br>
  <button>Кнопка</button>
</div>

Когда применять: центрирование текста, кнопок, иконок внутри контейнера. Не подходит для блочных элементов — для них следующий метод.

2. Блочный элемент с фиксированной шириной: margin: 0 auto

Самый известный приём для горизонтального центрирования блоков. Работает просто: задаём элементу ширину меньше родительской и устанавливаем левый и правый отступы в auto. Браузер поровну распределяет свободное пространство по бокам — блок встаёт по центру. Важно: элемент должен быть блочным (display: block или flex) и иметь явную ширину.

<style>
.block-center {
  width: 300px;
  margin: 0 auto;
  background: #f0f0f0;
}
</style>

<div class="block-center">Блок по центру</div>

Недостаток классического margin: 0 auto — он не учитывает направление письма. В языках с письмом справа налево (арабский, иврит) логичнее опираться на inline-ось, а не на жёсткие left/right.

3. Горизонтальное центрирование с margin-inline: auto (новый подход)

На смену физическим margin-left и margin-right приходят логические свойства. margin-inline управляет отступами по inline-оси (в русском/английском — это горизонталь, в арабском — тоже горизонталь, но направленная иначе). Запись margin-inline: auto центрирует элемент по горизонтали, корректно реагируя на смену направления текста. Этот метод особенно ценен для мультиязычных сайтов и компонентов, где dir="rtl" может меняться.

<style>
.block-logical {
  width: 300px;
  margin-inline: auto; /* автоматические отступы по горизонтали */
  background: #e0f0ff;
}
</style>

<div class="block-logical">Логическое центрирование</div>

Поддержка логических свойств (margin-inline, padding-inline, border-inline и пр.) доступна во всех современных браузерах — Can I Use margin-inline. Это метод будущего, который уже можно использовать в продакшене.

4. Центрирование одной строки текста: line-height

Если внутри контейнера находится ровно одна строка текста, можно выставить line-height равным высоте контейнера. Текст визуально окажется по центру. Метод прост, но ломается при переносе строки.

<style>
.line-center {
  height: 100px;
  line-height: 100px;
  border: 1px solid #ccc;
}
</style>

<div class="line-center">Текст в одну строку</div>

5. Табличное поведение: display: table-cell и vertical-align: middle

Эмуляция таблицы позволяет добиться вертикального центрирования неизвестного количества контента. Родитель становится display: table, а дочерний блок — display: table-cell с vertical-align: middle. Способ надёжен, работает в IE8+, но добавляет лишние обёртки.

<style>
.table-wrapper {
  display: table;
  height: 200px;
  width: 100%;
}
.table-cell-center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>

<div class="table-wrapper">
  <div class="table-cell-center">Вертикально и горизонтально по центру</div>
</div>

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

«Трюк с 50%» — классика, работающая даже в IE9 (с вендорными префиксами для transform). Элемент абсолютно позиционируется, смещается на 50% от верхнего и левого края родителя, а затем transform: translate(-50%, -50%) сдвигает его обратно на половину собственной ширины и высоты. Подходит для блоков с неизвестными заранее размерами.

<style>
.absolute-wrapper {
  position: relative;
  height: 200px;
  background: #fafafa;
}
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<div class="absolute-wrapper">
  <div class="absolute-center">Точный центр</div>
</div>

Минус: при использовании transform могут поплыть дочерние элементы с position: fixed, иногда наблюдается размытие текста в старых браузерах. Тем не менее метод остаётся популярным.

7. Flexbox: justify-content + align-items

Самое частое решение для центрирования одного или нескольких элементов. Родитель получает display: flex, justify-content: center (горизонталь) и align-items: center (вертикаль). Дочерние блоки выравниваются по обеим осям независимо от их количества и размеров. Поддержка: IE 10 с префиксами, полная — все современные браузеры.

<style>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px dashed #aaa;
}
</style>

<div class="flex-center">
  <div>Flex-центр</div>
</div>

8. Flexbox + auto-отступы: margin-inline и margin-block

Внутри flex-контейнера работает магия автоматических отступов. Свойство margin-inline: auto центрирует элемент по горизонтали, а margin-block: auto — по вертикали (логический аналог margin-top: auto; margin-bottom: auto). Такой тандем размещает блок строго в центре flex-родителя. Этот подход удобен, когда не нужно трогать свойства самого контейнера, а центрировать требуется только один конкретный flex-элемент.

<style>
.flex-margin-center {
  display: flex;
  height: 200px;
}
.flex-child {
  margin-inline: auto; /* горизонтальный центр */
  margin-block: auto;  /* вертикальный центр */
}
</style>

<div class="flex-margin-center">
  <div class="flex-child">Auto margins</div>
</div>

Этот метод — эволюция классического margin: auto с учётом логических осей. Он применим только внутри flex- или grid-раскладок.

9. Grid: place-items — рекордная краткость

Если вам нужно максимально короткое и выразительное центрирование, используйте display: grid и place-items: center. Это свойство-шорткат одновременно устанавливает align-items и justify-items в центр. Одна строка — и дочерний блок идеально выровнен по двум осям. Поддержка: все современные браузеры, включая Edge на Chromium.

<style>
.grid-place-center {
  display: grid;
  place-items: center;
  height: 200px;
  background: #f3f3f3;
}
</style>

<div class="grid-place-center">
  <div>Grid place-items</div>
</div>

Лаконичность place-items делает его идеальным выбором для небольших контейнеров и компонентов.

10. Grid: align-content + justify-content

Когда нужно выровнять не сам дочерний элемент внутри ячейки, а целиком сетку внутри контейнера (например, одна маленькая ячейка в большом блоке), применяют align-content и justify-content. При значении center контент стягивается к середине по вертикали и горизонтали.

<style>
.grid-content-center {
  display: grid;
  align-content: center;
  justify-content: center;
  height: 200px;
  background: #eef;
}
</style>

<div class="grid-content-center">
  <div>Сетка align-content</div>
</div>

11. Комбинация align-content и margin-inline (новый подход)

Современные макеты всё чаще используют логические свойства в паре с сетками. Здесь align-content: center выравнивает все строки сетки по вертикали, а дочернему элементу добавляется margin-inline: auto для горизонтального центрирования внутри своей ячейки. Это даёт полный контроль над положением даже в многоколоночных grid-раскладках.

<style>
.new-center {
  display: grid;
  align-content: center; /* центрирование строк сетки по вертикали */
  height: 200px;
  background: #efe;
}
.new-center > .inner {
  margin-inline: auto; /* горизонтальное центрирование элемента внутри ячейки */
}
</style>

<div class="new-center">
  <div class="inner">margin-inline + align-content</div>
</div>

12. Flex-wrap + align-content + margin-inline (новый подход)

Если flex-контейнер многострочный (flex-wrap: wrap), свойство align-content управляет распределением строк по поперечной оси. Установка align-content: center прижимает строки к центру по вертикали, а margin-inline: auto у дочернего блока с шириной max-content довершает горизонтальное выравнивание. Метод полезен для галерей и адаптивных сеток на флексах.

<style>
.flex-wrap-center {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* работает при wrap и наличии высоты */
  height: 200px;
  background: #fee;
}
.flex-wrap-center > .box {
  width: max-content; /* ширина по содержимому, чтобы margin-inline сработал */
  margin-inline: auto; /* горизонтальный центр */
  padding: 0.5em 1em;
  background: white;
  border: 1px solid #ccc;
}
</style>

<div class="flex-wrap-center">
  <div class="box">Flex-wrap + align-content + margin-inline</div>
</div>

Этот подход особенно актуален в 2026 году, когда логические свойства стали стандартом де-факто для интернациональных проектов, а Flexbox и Grid используются повсеместно.