Як відцентрувати елемент в CSS: повний гайд

Стріла точно в центр мішені на зеленому полі — метафора ідеального CSS-центрування

"Як відцентрувати div?" — це питання, яке гуглять мільйони розробників по всьому світу. Щороку. Stack Overflow навіть має окреме питання з 2008 року, яке набрало мільйони переглядів. А на співбесідах "відцентруй елемент" — класична задача, яку дають навіть сеньйорам.

Але чесно? Сьогодні це простіше, ніж замовити каву. Давай розберемось раз і назавжди.

Чому це взагалі було складно?

CSS створювали для стилізації документів — тексту, заголовків, абзаців. Не для побудови складних макетів. Тому до появи Flexbox і Grid розробники мудрували з table-cell, негативними відступами та хаками з line-height. Кожен метод працював лише в певних випадках, і вибрати правильний було справжнім квестом.

З 2024 року ця ера офіційно закінчилась. Тепер є 5 простих способів, кожен для свого випадку.

Спосіб 1: text-align: center — для тексту і рядкових елементів

Найпростіший і найстаріший. Центрує текст, посилання, картинки — все, що є рядковим (inline).

.container {
  text-align: center;
}

Працює для: тексту, <span>, <a>, <img>.

Не працює для: блочних елементів (<div>, <section>). І лише горизонтально — вертикально не допоможе.

Спосіб 2: margin: auto — для блочних елементів горизонтально

Хочеш відцентрувати <div> горизонтально? Задай йому ширину і margin: auto:

.card {
  max-width: 400px;
  margin: 0 auto;
}

Сучасніший варіант з логічними властивостями (працює коректно для мов з напрямком справа-наліво):

.card {
  max-width: 400px;
  margin-inline: auto;
}

Це як поставити коробку на стіл і сказати: "розподіли вільний простір порівну зліва і справа". Браузер саме це і робить.

Обмеження: тільки горизонтально, і елемент обов'язково повинен мати обмежену ширину.

Спосіб 3: Flexbox — універсальний солдат

Це метод, який варто запам'ятати першим. Три рядки CSS — і елемент по центру обох осей:

.container {
  display: flex;
  justify-content: center; /* горизонтально */
  align-items: center;     /* вертикально */
}

Потрібно лише горизонтально? Прибери align-items. Лише вертикально? Прибери justify-content. Flexbox гнучкий — тому і називається flex.

Якщо в контейнері лише один дочірній елемент, є ще коротший хак:

.container {
  display: flex;
}

.child {
  margin: auto; /* центрує по обох осях у flex-контейнері */
}

Якщо ти поки вивчаєш CSS, подивись наш урок з Flexbox, де все розібрано покроково.

Спосіб 4: Grid + place-content — мінімум коду

Найкоротший варіант. Два рядки — і готово:

.container {
  display: grid;
  place-content: center;
}

place-content — це скорочення для align-content + justify-content одночасно. Працює ідеально для центрування одного елемента або групи елементів.

Grid особливо зручний, коли потрібно накласти елементи один на одного (наприклад, текст поверх картинки) і відцентрувати їх:

.overlay {
  display: grid;
  place-items: center;
}

.overlay > * {
  grid-row: 1;
  grid-column: 1;
}

Більше про Grid — в уроці з CSS Grid.

Спосіб 5: align-content: center — новинка 2024 року

З квітня 2024 року всі основні браузери підтримують align-content для звичайних блочних елементів — без flex чи grid:

.container {
  height: 300px;
  align-content: center;
}

Одна властивість — і вміст вертикально по центру. Елемент залишається звичайним блоком, ніяких побічних ефектів.

Для повного центрування (обидві осі) комбінуй з margin-inline: auto:

.container {
  height: 300px;
  align-content: center;
}

.child {
  width: fit-content;
  margin-inline: auto;
}

Це найпростіший спосіб вертикального центрування в історії CSS.

Яку техніку вибрати?

Правило: якщо сумніваєшся — бери Flexbox. Він покриває 90% випадків.

Час практикуватись

Центрування в CSS — це як їзда на велосипеді. Спочатку здається складним, потім не розумієш, чому хтось з цим мучився. Відкрий DevTools у браузері, створи <div> і спробуй кожен метод — за 10 хвилин вони стануть інтуїтивними.

А якщо хочеш системно вивчити CSS від основ — починай з блоку CSS у нашому курсі. Від селекторів до Grid за 8 уроків.