Як вирівняти position: absolute елемент по центру

Три надійних способи центрування елементів у CSS

Як центрувати елемент із position: absolute — одне з найпоширеніших запитань верстальників, які користуються CSS. На Stack Overflow воно зібрало тисячі голосів та сотні відповідей, бо просте завдання виявилося не таким очевидним.

Звичні методи на кшталт margin: auto тут не працюють — абсолютно позиційований елемент «випадає» з потоку документа. В цій короткій статті розберемо кілька перевірених способів вирівняти position: absolute по центру.

Метод 1: через transform

Це найвідоміший та найнадійніший спосіб центрувати елемент із position: absolute.

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

Працює це так:

Властивості top: 50% і left: 50% зміщують верхній лівий кут елемента в центр контейнера.
Потім transform: translate(-50%, -50%) компенсує це зміщення, зсуваючи елемент назад на половину його власної ширини й висоти.

Цей підхід — хороший варіант для елементів будь-якого розміру, навіть якщо вони змінюються динамічно. Крім того, він простий, зрозумілий та кросбраузерний.

Але якщо елемент уже має інші трансформації (наприклад, обертання або масштабування), потрібно об’єднувати все в один transform.

Також якщо ви часто центруєте елементи цим методом, створіть невеликий CSS-клас (наприклад, .center-absolute) і просто додавайте його до потрібних блоків.

Метод 2: через flexbox

Flexbox — сучасний та найзручніший спосіб центрування, який часто дозволяє обійтися без position: absolute взагалі. Ідея проста: потрібно зробити батьківський елемент флекс-контейнером і вирівняти все, що в ньому, по центру.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Працює це наступним чином:

display: flex активує флекс-контейнер
justify-content: center вирівнює дочірні елементи по горизонталі
align-items: center — по вертикалі

Для того щоб користуватися цим методом, не потрібне точне позиціювання або знання розмірів елемента. Він підтримується в усіх сучасних браузерах і добре працює з адаптивною версткою.

Варто лише зауважити, що такий спосіб підходить лише тоді, коли ви можете змінювати стилі батьківського елемента. Якщо ж контейнер уже має position: absolute або складну структуру, цей метод може не підійти.

Використовуйте flexbox як базовий спосіб центрування в макетах, де ви контролюєте контейнер. Для сучасних інтерфейсів це часто найкращий варіант.

Метод 3: через calc()

Якщо ви точно знаєте розміри елемента, можна центрувати його за допомогою обчислень через calc().

Цей метод не такий гнучкий, як transform або flexbox, але все ж зручний для фіксованих елементів — наприклад, кнопок, модалок або лоадерів з чіткими розмірами.

.element {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

Працює цей метод просто:

50% зсуває елемент у центр контейнера.
-50px компенсує половину висоти або ширини елемента, щоб він став точно посередині (тут 50px — половина висоти й ширини елемента, тобто якщо елемент має 100×100px).

calc() — простий та передбачуваний спосіб для статичних елементів. Він не залежить від transform або flexbox, тому може використовуватись у специфічних випадках.

Але важливо памʼятати, що він не адаптивний. Тобто якщо розміри елемента змінюються, доведеться вручну перераховувати значення. Також він не підійде для тексту або елементів з динамічним контентом.

Застосовуйте calc() там, де дизайн жорстко зафіксований, — наприклад, у модальних вікнах або елементах з фіксованими піксельними розмірами.

На завершення

Центрування елементів з position: absolute — це класика, яку проходив кожен верстальник. Проте універсального рішення не існує і все залежить від контексту.

Найголовніше — не просто копіювати код із прикладів, а розуміти, чому кожен метод працює. Це дає свободу обирати оптимальне рішення під конкретну задачу, а не шукати чарівну формулу центрування щоразу наново.

Автор: Павло Кірноз