Дивовижний світ веброзробки on Telegram: “#css_in_action Ну що, поцентруємо трошки div? У…”

#css_in_action
Ну що, поцентруємо трошки div? У мене тут вчора в Threads попросили, то як я можу відмовити? А то все архітектури, гуд інаф коде. Одним словом, донт пуш зе хорсес, треба й ділом зайнятись. Тож…

ЦЕНТРУЄМО ГОРИЗОНТАЛЬНО
Margin

.el { 
  margin: 0 auto;
  width: ...;
}

Працює, коли елемент має обмежену ширину. Не працює для інлайнових елементів.

Для інлайнових блоків

.parent { text-align: center; }
.el { display: inline-block; }

Класичний спосіб для вирівнювання inline або inline-block елементів. Батьківський text-align впливає лише на інлайн-контент.

Flexbox

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

Найстабільніший спосіб для X-центрування. Важливо памʼятати, що align-items за замовченням stretch, тому вертикаль може "роздувати".

Grid

.parent {
  display: grid;
  justify-items: center;
}

Просто, сучасно, стильно, молодіжно.

Absolute + transform

.el {
  position: absolute;
  left: 50%;
  // або
  inset-inline: 50%;
  transform: translateX(-50%);
}

100% надійність. Потрібен position: absolute|fixed. Підтримка inset-inline чудова у всіх сучасних бравзерах (навіть Safari).

justify-self

.el { justify-self: center }

Працює у Grid. Не працює в Flex (бо цим керує сам контейнер). Працює поза grid в блочних контекстах, але тільки в Chrome та Edge. Firefox і Safari цю поведінку ігнорують, сподіваюсь, тимчасово.

ЦЕНТРУЄМО ВЕРТИКАЛЬНО
Flexbox

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

Працює за умови flex-direction: row. Важливо памʼятати, що потрібна висота контейнера, інакше нічого не відцентрується.

Grid

.parent {
  display: grid;
  align-items: center;
}

Просто, сучасно, стильно, молодіжно.

Absolute + transform

.el {
  position: absolute;
  top: 50%;
  // або
  inset-block: 50%;
  transform: translateY(-50%);
}

Це ж було вже.

align-self

.el { align-self: center; }

Працює поки лише всередині flex та grid. Всередині flex це вертикально, якщо flex-direction: row, якщо це column, то вирівнювання буде по горизонталі. Очікується підтримка в блочних контекстах.

Table-cell

.parent {
  display: table-cell;
  vertical-align: middle;
}

Дідівський спосіб, не позбавлений недоліків. Багатьох недоліків.

ЦЕНТРУЄМО ЦЕНТРАЛЬНО
Flexbox

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

Один із найнадійніших способів. Потрібна висота в контейнера.

Grid

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

Найменше коду. Повна підтримка. Але потрібен grid.

Absolute + transform

.el {
  position: absolute;
  top: 50%;
  left: 50%;
  // або
  inset: 50%;
  transform: translate(-50%, -50%);
}

Найнадійніший варіант з абсолютним позиціонуванням. inset — скорочений запис для top/right/bottom/left усіх разом. Боже, як я мріяв колись про цю властивість…

place-self

.el { place-self: center; }

Працює тільки всередині grid. Поза ним — частково підтримується в Chromium, але не в Safari чи Firefox.

---
Ну от якось так можна відцентрувати div в липні місяці 2025 року. Можливо ви знаєте ще якийсь чудернацький спосіб, то обовʼязково розкажіть про нього в коментарях. До речі, приєднуйтесь до чату, як іще будемо ділитися глупими мемами про джаваскрипт?

MDN: CSS Box Alignment Module Level 3

@babichdev