Как выровнять блок по центру в CSS и HTML: рабочие способы

Фраза «выровнять всё по центру» может означать разные задачи: центрировать текст внутри кнопки, поставить блок по горизонтали, расположить карточку точно в центре экрана или выровнять несколько элементов по обеим осям. Универсального свойства для всех случаев нет, но в современном CSS почти всегда достаточно margin: auto, Flexbox или Grid.

Сначала определите, что именно должно двигаться: содержимое элемента или сам элемент относительно родителя. Затем выберите способ из таблицы и проверьте поведение на узком экране.

Быстрый выбор способа

Центрирование текста и строчных элементов

Для текста, ссылок и других строчных элементов используют text-align на родителе. Свойство управляет расположением строчного содержимого, но не перемещает сам блочный контейнер.

<div class="intro">
  <h1>Заголовок страницы</h1>
  <p>Короткое описание</p>
</div>

.intro {
  text-align: center;
}

Если внутри находятся блочные карточки шириной во всю строку, они не станут уже и не переместятся. Центрируется их текстовое содержимое.

Блок по горизонтали через margin auto

Классический способ подходит для блочного элемента, ширина которого меньше доступной ширины родителя. Лучше задавать не жесткий width, а max-width вместе с адаптивной шириной.

<main class="page">
  <article class="content">...</article>
</main>

.content {
  width: min(100% - 32px, 760px);
  margin-inline: auto;
}

margin-inline — логическая запись для левого и правого отступов. Она удобна для разных направлений письма. Если элемент занимает всю ширину родителя, свободного места для автоматических отступов нет, поэтому визуально ничего не изменится.

Flexbox: центр по горизонтали и вертикали

Flexbox удобен, когда родитель управляет одним рядом или колонкой дочерних элементов. justify-content работает вдоль главной оси, а align-items — вдоль поперечной.

<section class="hero">
  <div class="hero__content">
    <h2>Добро пожаловать</h2>
    <button>Начать</button>
  </div>
</section>

.hero {
  min-height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__content {
  text-align: center;
}

Если включить flex-direction: column, главная ось станет вертикальной. Поэтому при отладке всегда проверяйте направление: значение justify-content: center может центрировать не по той оси, которую вы ожидали.

Grid: самый короткий вариант для одного элемента

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

.empty-state {
  min-height: 320px;
  display: grid;
  place-items: center;
}

place-items: center объединяет align-items и justify-items. Если нужно центрировать не элементы внутри ячеек, а всю сетку как группу, применяют place-content: center. Эти свойства решают разные задачи.

Центрирование через position и transform

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

.stage {
  position: relative;
  min-height: 400px;
}

.badge {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

Родителю нужен position: relative, иначе отсчет может пойти от страницы или другого предка. Для обычной раскладки этот способ избыточен: Flexbox и Grid проще, лучше адаптируются и сохраняют нормальный поток документа.

Модальное окно точно в центре экрана

Для современного модального окна удобно центрировать панель внутри полноэкранного слоя. Сам оверлей фиксируют по границам окна, а панель размещают Grid-раскладкой.

<div class="modal" role="dialog" aria-modal="true">
  <div class="modal__panel">...</div>
</div>

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(0 0 0 / 0.55);
}

.modal__panel {
  width: min(100%, 560px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
}

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

Вертикальное выравнивание текста в кнопке

Не пытайтесь подбирать одинаковый line-height под фиксированную высоту: при переносе текста или изменении шрифта макет ломается. Кнопку проще сделать flex-контейнером.

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  text-align: center;
}

Так подпись остается по центру, а высота может увеличиться для двух строк. min-height безопаснее жесткого height.

Как центрировать несколько карточек

Если последняя строка должна собираться по центру, используйте Flexbox с переносом. Для строгой сетки колонок лучше Grid.

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.card {
  flex: 0 1 280px;
}

При Grid-раскладке можно создать адаптивные колонки:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 320px));
  justify-content: center;
  gap: 24px;
}

Почему центрирование не работает

• У блока нет ограниченной ширины. Элемент занимает всю строку, поэтому автоматическим отступам нечего распределять.
• Свойство задано не тому элементу. Flex- и Grid-выравнивание обычно задают родителю, а не дочернему блоку.
• Перепутаны оси Flexbox. Проверьте flex-direction перед настройкой justify-content.
• Нет высоты или свободного пространства. Вертикальное центрирование незаметно, если родитель равен высоте содержимого.
• Абсолютный элемент привязан к неверному предку. Добавьте позиционированный контейнер.
• Старые float или transform продолжают действовать. В инструментах разработчика проверьте итоговые вычисленные стили.
• Содержимое шире экрана. Добавьте адаптивную ширину, перенос слов и внутренние отступы.

Практический алгоритм

1. Выделите родителя и дочерний элемент в инструментах разработчика.
2. Определите, нужно центрировать текст, сам блок или группу блоков.
3. Для текста начните с text-align, для контейнера — с margin-inline: auto.
4. Для двух осей выберите Flexbox или Grid.
5. Используйте абсолютное позиционирование только для независимых слоев.
6. Проверьте ширины 320, 768 и 1280 пикселей, длинный текст и увеличение шрифта.

Для большинства новых интерфейсов достаточно трех приемов: margin-inline: auto для контейнера, Flexbox для ряда и Grid с place-items: center для отдельной области. Чем проще способ, тем легче поддерживать адаптивность и доступность страницы.