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

Заголовок встал по центру, а карточка под ним — нет. Добавляешь карточке text-align: center, но она всё так же прижата к левому краю, зато текст внутри неё съехал к середине.

Способ зависит от того, что именно ты двигаешь: строки текста ставит по центру text-align: center, блок по горизонтали — margin-inline: auto, а что угодно по обеим осям — родитель с display: grid и place-items: center. Разберём все три способа на одной странице и посмотрим, почему каждый из них иногда «не работает».

Пример: три способа на одной странице

Открой пример в песочнице HTML/CSS ссылкой под вторым блоком: разметка попадёт во вкладку index.html, стили — в styles.css. Карточка стоит в центре тёмного блока, текст в ней — по центру строк, а блок с правилами ниже — по центру страницы, хотя его текст выровнен по левому краю.

HTML:

<section class="hero">
  <div class="card">
    <h1>Мастер-класс по кофе</h1>
    <p>Суббота, 12:00. Сварим кофе в турке и в воронке.</p>
    <a class="button" href="#rules">как попасть</a>
  </div>
</section>
<div class="rules" id="rules">
  <h2>Как попасть</h2>
  <p>Запишись у бариста или оставь имя в форме на сайте. Мест двенадцать, начнём без опозданий.</p>
</div>

CSS:

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.hero {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: 1rem;
  background: #1f2a44;
}

.card {
  max-width: 20rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #ffffff;
  text-align: center;
}

.card h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: #ff7a59;
  color: #ffffff;
  text-decoration: none;
}

.rules {
  max-width: 28rem;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

Здесь работают три разных правила: .hero ставит карточку в центр по обеим осям, .card ставит по центру свои строки и кнопку, а .rules центрирует сам блок.

CSS / 01

Три свойства двигают три разные вещи

text-align: center двигает строки внутри блока, margin-inline: auto — сам блок, если он уже родителя, а place-items: center задают родителю, чтобы он поставил ребёнка в центр по обеим осям.

Текст по центру: text-align

text-align: center задают блоку, а двигается его содержимое: каждая строка текста встаёт посередине своей строки в блоке. Так же ведут себя строчные элементы — ссылки, <strong>, картинки и кнопки с display: inline-block, поэтому кнопка в карточке тоже оказалась по центру.

.card {
  text-align: center;
}

Свойство наследуется: оно действует на всё внутри .card, пока какой-нибудь вложенный блок не задаст своё значение, например text-align: left. А вот сам блок .card от него никуда не сдвинется.

Блок по центру по горизонтали: margin-inline: auto

Блок по умолчанию занимает всю ширину родителя, поэтому центрировать его не во что. Сначала ограничь ширину, потом отдай свободное место полям поровну:

.rules {
  max-width: 28rem;
  margin-inline: auto;
}

margin-inline: auto — это левое и правое поле со значением auto: браузер делит остаток ширины пополам. Старая запись margin: 0 auto делает то же самое и ещё обнуляет поля сверху и снизу. В примере стоит margin: 1.5rem auto: сверху и снизу по 1.5rem, слева и справа поровну.

max-width удобнее, чем width: на широком экране блок не растягивается дальше 28rem, а на узком становится уже вместе с экраном.

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

Чтобы поставить элемент в центр по обеим осям, команду дают родителю. Короче всего это записывается через Grid:

.hero {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

place-items: center — сокращение для align-items и justify-items: дочерний элемент встаёт в центр своей ячейки по вертикали и по горизонтали. Ячейка здесь одна и занимает весь .hero.

Тот же результат даёт Flexbox:

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

Разница видна, когда детей несколько. В Grid каждый получает свою строку: элементы встают столбиком, каждый по центру своей строки. Во Flexbox они выстраиваются в ряд по главной оси. Подробнее про оси — в статье про Flexbox.

Родителю нужна высота. Без min-height или height родитель высотой ровно со своё содержимое, и по вертикали двигать некуда. На весь экран — min-height: 100vh, в примере стоит 60vh.

Картинка и элемент поверх страницы

Картинка. <img> по умолчанию строчный элемент, поэтому её ставит по центру text-align: center у родителя. Второй способ — сделать её блоком: display: block; margin-inline: auto;. Заодно пропадёт небольшой зазор под картинкой: строчная картинка стоит на линии текста и оставляет место под буквы с хвостиками.

.photo {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

Элемент поверх страницы. Значок, подсказку или окно поверх содержимого ставят через position: absolute внутри родителя с position: relative:

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

top: 50% и left: 50% ставят в центр родителя левый верхний угол элемента. translate(-50%, -50%) сдвигает элемент назад на половину его собственной ширины и высоты, и в центре оказывается уже его середина.

Шпаргалка: что выбрать

Что ставишь в центр	Как	Кому пишешь
строки текста, ссылки, кнопки-строки	`text-align: center`	родителю
блок по горизонтали	`max-width` и `margin-inline: auto`	самому блоку
что угодно по обеим осям	`display: grid; place-items: center`	родителю
несколько элементов в ряд по центру	`display: flex; justify-content: center; align-items: center`	родителю
картинку	`text-align: center` у родителя или `display: block; margin-inline: auto`	родителю или картинке
элемент поверх содержимого	`position: absolute`, `top: 50%; left: 50%; transform: translate(-50%, -50%)`	самому элементу, родителю — `position: relative`

Почему не встаёт по центру: частые ошибки

text-align у блока, который надо сдвинуть. Свойство двигает содержимое строк, а не сам блок. Блоку нужен margin-inline: auto или родитель с Grid.

margin: auto без ширины. Блок и так занимает всю ширину, свободного места нет — делить нечего. Задай max-width.

align-items без высоты родителя. Родитель высотой с содержимое, и центр по вертикали совпадает с его верхом. Дай родителю min-height.

vertical-align: middle у блока. Это свойство работает для строчных элементов и ячеек таблицы, а блок от него по вертикали не сдвинется.

Три правки, чтобы закрепить

Открой пример в песочнице и перед каждой правкой предскажи результат:

Убери у .card строку text-align: center. Карточка останется в центре экрана, а текст и кнопка в ней прижмутся к левому краю: за карточку отвечает .hero, а за её строки — она сама.
Замени у .hero значение min-height: 60vh на 0. Тёмный блок станет высотой с карточку, и центрировать по вертикали станет некуда.
Удали у .rules строку max-width: 28rem. Блок растянется на всю ширину, и margin с auto перестанет его центрировать: свободного места не осталось.

Проверить себя без подсказок можно в игре «Повтори макет»: первый уровень — квадрат ровно в центре холста.