IT forum Ukraine

Привіт усім! Центрування елементів — це класика, з якої починає кожен верстальник. Сьогодні розберемо три найнадійніші способи, які покривають 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%);

}

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

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

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

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

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

Taras_SEO

Stas_Frontend

Yulia_JS

Olena_Top