«Як відцентрувати div» – мабуть, найпопулярніший жарт у веб-розробці, і водночас питання, яке справді ставить у глухий кут кожного початківця. Причина проста: центрувати можна по-різному залежно від того, що саме і де ти центруєш. По горизонталі, по вертикалі, текст чи блок, відомої ширини чи ні. Давай розкладемо все по поличках і підберемо спосіб під кожну ситуацію.

Усі приклади працюють у сучасних браузерах. Для початку розмітка, на якій пробуватимемо:

<div class="parent">
  <div class="child">Я посередині</div>
</div>

1. Текст по горизонталі: text-align

Якщо треба просто вирівняти текст чи рядкові елементи (картинки, посилання, кнопки з display: inline-block) усередині блока, вистачить однієї властивості батьківського елемента:

.parent {
  text-align: center;
}

2. Блок по горизонталі: margin: auto

Блок із заданою шириною центрується за допомогою автоматичних бокових полів:

.child {
  width: 300px;
  margin-inline: auto; /* те саме, що margin: 0 auto */
}

Без заданої ширини це не спрацює, бо блок і так розтягується на всю доступну ширину, і центрувати нема чого. Можна використати max-width замість width, щоб на вузьких екранах блок стискався.

3. По горизонталі й вертикалі: Flexbox

Найпопулярніший сучасний спосіб. Усі налаштування ставляться на батьківський елемент:

.parent {
  display: flex;
  justify-content: center; /* по горизонталі */
  align-items: center;     /* по вертикалі */
  min-height: 300px;       /* потрібна висота */
}

Тут працює проста логіка: justify-content керує основною віссю (за замовчуванням горизонтальною), а align-items поперечною. Важливий нюанс: щоб вертикальне центрування було помітне, у батьківського елемента має бути висота, більша, ніж у вмісту. Для центрування на весь екран використовуй min-height: 100vh.

4. Ще коротше: Grid

Якщо треба відцентрувати одну дитину в обох напрямках, сітка дає найкоротший запис:

.parent {
  display: grid;
  place-items: center;
  min-height: 300px;
}

Властивість place-items – скорочення для align-items і justify-items. А якщо в батьківського елемента кілька дітей і треба зсунути в центр усю їх групу, є place-content: center.

5. Центрування з абсолютним позиціонуванням

Пригодиться, коли елемент треба накласти поверх іншого (віконце, мітка на картинці). Батьківському потрібен position: relative:

.parent {
  position: relative;
  min-height: 300px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Фокус у тому, що top: 50% і left: 50% зсувають лівий верхній кут дитини в центр, а translate(-50%, -50%) повертає її назад на половину власних розмірів. Тому вона стає рівно посередині незалежно від розмірів.

Є й варіант без transform, але вже із заданими розмірами:

.child {
  position: absolute;
  inset: 0;
  width: 200px;
  height: 100px;
  margin: auto;
}

6. Текст по вертикалі в рядку

Одна лінія тексту всередині кнопки чи панелі центрується по вертикалі й без Flexbox, якщо висота рядка дорівнює висоті блока:

.button {
  height: 48px;
  line-height: 48px;
  text-align: center;
}

Для багаторядкового тексту так робити не можна, там краще Flexbox.

Який спосіб обрати

  • Тільки текст по центру – text-align: center.
  • Блок відомої ширини по горизонталі – margin-inline: auto.
  • Усе по центру в обидва боки – Flexbox або Grid з place-items.
  • Накласти поверх чогось – абсолютне позиціонування з transform.

Типові помилки

  1. Стилі на дитині замість батька. Flexbox і Grid налаштовуються на контейнері.
  2. Немає висоти. Вертикально центрувати в блоці, що не вищий за свій вміст, нема сенсу.
  3. Забули position: relative у батьківського елемента при абсолютному позиціонуванні: тоді дитина центрується відносно всієї сторінки.
  4. Центрування margin: auto по вертикалі без Flexbox чи Grid не працює для звичайного блока.

Для практики можеш відкрити інструменти розробника в браузері (F12) та по черзі додавати й вимикати властивості прямо на сторінці. Так найшвидше розуміти, що кожна з них робить.

Що далі

Далі цікаво спробувати центрування в готових прикладах. Наприклад, у кнопці бургер-меню на CSS рисочки позиціонуються так само, з абсолютним зсувом і translate, а в статті про темну тему на сайті є практика з CSS-змінними. Перемикати класи елементів із JavaScript допоможе стаття про classList.

Більше про це – за позначками CSS, Flexbox і Grid та Front-end розробка.

А яким способом центруєш ти: Flexbox, Grid чи ще по-старому? Розкажи в коментарях 🙂