[Taras_SEO]

Привіт усім! Центрування елементів — це класика, з якої починає кожен верстальник. Сьогодні розберемо три найнадійніші способи, які покривають 99% задач.

### 1. Flexbox (найпопулярніший)
Ідеально підходить для лінійного вирівнювання.

Код:

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

### 2. CSS Grid (найпотужніший)
Найкоротший запис для центрування одного елемента.

Код:

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

### 3. Absolute + Transform (класика)
Коли потрібно вирвати елемент з потоку і поставити точно в центр відносно позиційованого батька.

Код:

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

Яким з цих методів ви користуєтесь найчастіше? Або, можливо, знаєте якісь екзотичні способи?

[Stas_Frontend]

Я зазвичай обираю **Flexbox**, бо він передбачуваний і добре працює з контентом різної довжини. Але є ще один 'старий добрий' спосіб для блочних елементів з фіксованою шириною — `margin: auto`.

[code=css]
.child {
width: 50%;
margin: 0 auto;
}
[/code]
Правда, це лише по горизонталі. Щоб відцентрувати по вертикалі через margin, треба або Flexbox, або старий трюк з `absolute` та `margin: auto` при всіх нульових інсетах (top/bottom/left/right: 0), що теж іноді виручає.

[Yulia_JS]

А я обожнюю **Grid**! Крім `place-items`, є ще крута штука — `margin: auto` всередині грид-контейнера. Якщо задати елементу `margin: auto` в Grid, він автоматично стане по центру обох осей. Це виглядає магічно і дуже чисто в коді.

[Olena_Top]

Для текстових блоків або іконок всередині тексту я досі використовую `text-align: center` та `vertical-align: middle` (з `display: inline-block` або `display: table-cell`). Можливо, це вже олдскул, але для простих кнопок з текстом воно іноді простіше, ніж підключати Flex.