Исполняемые доки CSS: Div по центру

Q: Как выровнять div по центру по горизонтали и вертикали?

Сделайте родителя сеткой и центрируйте ее содержимое: .parent { display: grid; place-items: center; }. Вариант на flexbox: display: flex; justify-content: center; align-items: center;. В обоих случаях родителю нужна высота больше, чем у div.

Q: Как выровнять div по центру только по горизонтали?

Задайте ему ширину и автоматические боковые отступы: .box { width: 300px; margin: 0 auto; } (или max-width для адаптивного блока). margin-inline: auto это то же самое в логических свойствах.

Q: Какой самый простой способ выровнять div по центру?

display: grid; place-items: center; у родителя: два объявления, обе оси, дочерний элемент любого размера. Flexbox используйте, когда родитель заодно выстраивает в ряд другие элементы.

Q: Как выровнять текст по центру внутри div?

Задайте div text-align: center для текста и строчного содержимого. Центрирование самого div и центрирование текста внутри него это две разные задачи.

Короткий ответ

Чтобы выровнять div по центру внутри родителя сразу по горизонтали и по вертикали, сделайте родителя сеткой и центрируйте ее содержимое:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Все шесть показывают 0px по обеим осям (рамка сцены 1px одинакова со всех сторон, поэтому центр не сдвигает). Измените ширину или текст блока и запустите снова: способы, которые не зависят от фиксированного размера, остаются на 0.

Какой способ выбрать

Способ	Центрирует	Нужен ли дочернему элементу фиксированный размер?	Лучше всего для
Grid `place-items: center`	Обе оси	Нет	Выбор по умолчанию: один дочерний элемент в блоке
Flexbox `justify-content` + `align-items`	Обе оси	Нет	Ряд или колонка элементов, центрированных группой
`margin: auto` во flex- или grid-родителе	Обе оси	Нет	Центрирование одного элемента, когда соседи размещены иначе
`margin: 0 auto`	Только по горизонтали	`width` или `max-width`	Контейнеры страницы, статьи, формы в обычном потоке
Absolute + `translate(-50%, -50%)`	Обе оси	Нет	Наложения, бейджи и модальные окна поверх другого содержимого
Absolute + `inset: 0; margin: auto`	Обе оси	Да, ширина и высота	Диалоги фиксированного размера
`align-content: center` у блока	По вертикали	Нет	Вертикальное центрирование без смены display у родителя

Способ 1: flexbox

Flexbox центрирует по двум осям двумя свойствами. justify-content отвечает за главную ось (горизонталь в строке), а align-items за поперечную:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

С несколькими дочерними элементами flexbox центрирует их группой, оставляя в строке. Здесь он выигрывает у grid, который выстроил бы три элемента в одну центрированную колонку. Все значения выравнивания разобраны на странице про justify-content.

Способ 2: grid

place-items: center это сокращение для align-items: center плюс justify-items: center. У grid-контейнера с одним дочерним элементом оно центрирует этот элемент в обоих направлениях:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

min-height вместо height позволяет родителю вырасти, если карточка станет выше 180px, вместо того чтобы карточка переполнила его.

Способ 3: margin: 0 auto (по горизонтали)

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

Второй блок заполняет всю ширину, поэтому свободного пространства нет и ничего не сдвигается. Это обычная причина, по которой margin: 0 auto «не работает». Кроме того, в обычном потоке он центрирует только по горизонтали; вертикальные auto-отступы там становятся 0. Зато внутри flex- или grid-родителя margin: auto центрирует в обоих направлениях, это третий блок в сравнении выше.

Способ 4: абсолютное позиционирование и transform

Когда элемент должен лежать поверх другого содержимого (бейдж на фотографии, модальное окно над страницей), спозиционируйте его абсолютно на 50% и сдвиньте назад на половину собственного размера:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

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

Вариант для элементов известного размера: position: absolute; inset: 0; margin: auto; плюс width и height. Автоматические отступы делят пространство со всех четырех сторон.

Способ 5: align-content у обычного блока

align-content: center теперь работает и у обычных блочных контейнеров, а не только у flex и grid. Он центрирует содержимое по вертикали, не меняя раскладку дочерних элементов:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

Поддерживается в актуальных Chrome, Firefox и Safari. Старые браузеры его игнорируют, поэтому если их нужно поддерживать, используйте grid.

Центрирование на весь экран

Чтобы выровнять диалог по центру окна просмотра независимо от прокрутки, объедините фиксированный полноэкранный слой с grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Чтобы центрировать содержимое всей страницы по вертикали, задайте родителю min-height: 100dvh, а не 100vh: на телефонах 100vh включает область под панелями браузера, и «центр» оказывается слишком низко.

Центрирование текста это другая задача

Все выше центрирует блок. Чтобы выровнять по центру текст внутри блока, задайте ему text-align: center, как показано на странице выравнивание текста по центру в HTML. Часто нужно и то и другое: grid, чтобы центрировать карточку, и text-align, чтобы центрировать строки внутри нее.

Частые ошибки

Родитель без высоты. Для вертикального центрирования нужно свободное пространство; у родителя, который сжимается по содержимому, его нет.
margin: 0 auto у блока во всю ширину. Сначала задайте width или max-width.
margin: auto для вертикального центрирования в обычном потоке. Вертикальные auto-отступы там равны 0; используйте flex или grid.
Абсолютное центрирование без позиционированного родителя. Элемент центрируется по странице, а не по блоку.
align-items: center у дочернего элемента. Свойства выравнивания задаются родителю (flex- или grid-контейнеру), кроме margin: auto и align-self.
text-align: center, чтобы центрировать блок. Он центрирует строчное содержимое (текст, изображения, дочерние inline-block), а не блочный дочерний элемент.

Часто задаваемые вопросы

Как выровнять div по центру по горизонтали и вертикали?

Сделайте родителя сеткой и центрируйте ее содержимое: .parent { display: grid; place-items: center; }. Вариант на flexbox: display: flex; justify-content: center; align-items: center;. В обоих случаях родителю нужна высота больше, чем у div.

Как выровнять div по центру только по горизонтали?

Задайте ему ширину и автоматические боковые отступы: .box { width: 300px; margin: 0 auto; } (или max-width для адаптивного блока). margin-inline: auto это то же самое в логических свойствах.

Почему margin: 0 auto не центрирует div?

У div нет ширины меньше контейнера, поэтому нет свободного пространства, которое можно поделить (блок по умолчанию заполняет всю ширину). Задайте width или max-width. Кроме того, он не действует на строчные элементы и никогда не центрирует по вертикали в обычном потоке.

Почему div не выравнивается по центру по вертикали?

Родитель высотой только в свое содержимое, поэтому лишнего пространства для центрирования нет. Задайте родителю высоту (или min-height), а затем используйте центрирование через grid или flexbox.

Какой самый простой способ выровнять div по центру?

display: grid; place-items: center; у родителя: два объявления, обе оси, дочерний элемент любого размера. Flexbox используйте, когда родитель заодно выстраивает в ряд другие элементы.

Как выровнять текст по центру внутри div?

Задайте div text-align: center для текста и строчного содержимого. Центрирование самого div и центрирование текста внутри него это две разные задачи.

Связанные концепции