Як відцентрувати div в CSS: 10 способів від 2000 до 2026

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

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

Чому? Бо CSS створювали для оформлення документів, а не для побудови макетів. І 15 років розробники вигадували хаки, один дикіший за інший.

Ця стаття — повна колекція: від музейних експонатів 2000-х до елегантного однорядкового рішення 2024 року. Вибери свій рівень — або прочитай все і відчуй, як далеко ми зайшли.

Музей CSS-центрування: як це робили до 2012

Експонат #1: table-cell + vertical-align (2000–2012)

Таблиці в HTML вміли центрувати вміст вертикально. Розробники подумали: "А якщо елемент прикинеться коміркою таблиці?"

/* 📅 ~2003. Так, це справді працювало. */
.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
}

Проблеми: display: table-cell ламає нормальний потік документа, ігнорує margin, і батьківському елементу потрібен display: table. Код перетворюється на таблицю, яка не є таблицею.

Експонат #2: line-height hack (2001–2010)

Якщо висота рядка дорівнює висоті контейнера — текст опиняється посередині. Геніально? Жахливо.

/* 📅 ~2005. Працює ТІЛЬКИ для одного рядка тексту */
.container {
  height: 200px;
  line-height: 200px; /* так, те саме число */
  text-align: center;
}

.container span {
  vertical-align: middle;
  line-height: normal; /* скидаємо для дочірнього */
}

Додаєш другий рядок тексту — все ламається. Змінюєш висоту контейнера — треба міняти і line-height. Крихкий, як порцеляна.

Експонат #3: negative margin + absolute (2005–2015)

Ідея: позиціонуємо елемент на 50% від верху і зліва, а потім "тягнемо" назад на половину його власного розміру. Але для цього потрібно знати розмір елемента заздалегідь.

/* 📅 ~2008. Потрібно знати ширину і висоту — жорстко */
.container {
  position: relative;
  height: 400px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;  /* половина висоти */
  margin-left: -100px; /* половина ширини */
}

Змінився контент? Перерахуй відступи вручну. Responsive? Забудь. Але це був єдиний надійний спосіб центрувати по обох осях до 2012 року.

Експонат #4: inline-block + "ghost element" (2009–2014)

Найбожевільніший. Створюємо невидимий елемент висотою 100% і вирівнюємо по ньому:

/* 📅 ~2009. Так, хтось це придумав. І воно працювало. */
.container {
  text-align: center;
  height: 300px;
}

.container::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

"Привид" (::before) розтягується на всю висоту, а vertical-align: middle вирівнює сусідні inline-block елементи відносно один одного. Магія? Чорна магія.

Експонат #5: absolute + transform (2012–2020)

Перехідна ера. transform: translate(-50%, -50%) дозволив не знати розміри елемента — він сам себе зсуває:

/* 📅 ~2013. Перший "майже нормальний" спосіб */
.container {
  position: relative;
  height: 400px;
}

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

Працює! Для будь-якого розміру! Але: елемент вилітає з потоку документа (position: absolute), може перекривати сусідів, і контейнер "не знає" про його розмір. Для модалок — ок. Для верстки — ні.

5 сучасних способів (2015–2026)

Спосіб 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-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-контейнері */
}

Більше про Flexbox — у шпаргалці з CSS Flexbox та уроці 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 та уроці 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 уроків.