Як центрувати блок і текст

Редагувати

Центрування по обох осях, текст по центру й по ширині, стовпчик у flex.

HTML

<h2>Один блок по центру</h2>
<div class="box grid">
    <div class="card">grid + place-items</div>
</div>

<h2>Текст по центру</h2>
<div class="box">
    <p class="text-center">Цей абзац вирівняно по центру рядка.</p>
    <p class="text-justify">А цей — по ширині: браузер розтягує пробіли так, щоб обидва краї були рівні. Видно на довгому тексті з кількох рядків.</p>
</div>

<h2>Стовпчик по центру</h2>
<div class="box flex-col">
    <div class="card">перший</div>
    <div class="card">другий</div>
</div>

CSS

body { font: 16px/1.6 system-ui, sans-serif; margin: 12px; color: #16202b; }
h2 { margin: 18px 0 8px; font-size: 15px; color: #475467; }
h2:first-child { margin-top: 0; }
.box {
    padding: 12px;
    background: #f2f4f7;
    border-radius: 8px;
}

/* 1. Найкоротший спосіб відцентрувати блок в обох осях */
.grid {
    display: grid;
    place-items: center;
    min-height: 130px;
}

/* 2. Текст: по центру рядка і по ширині */
.text-center { text-align: center; }
.text-justify { text-align: justify; }

/* 3. Стовпчик: головна вісь стала вертикальною, тож ролі осей помінялись —
   justify-content розставляє ЗГОРИ ВНИЗ, align-items — ліворуч-праворуч */
.flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.card {
    padding: 10px 16px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(22, 32, 43, .12);
}

Найкоротший спосіб — grid і place-items

display: grid плюс place-items: center центрує вміст одразу по обох осях, і працює це з будь-якою кількістю дітей, будь-якої висоти.

place-items — це скорочення для align-items (упоперек) і justify-items (вздовж). Писати два рядки замість одного сенсу немає.

Тому старий прийом із position: absolute, top: 50% і transform: translate(-50%, -50%) сьогодні потрібен лише там, де елемент навмисно вийнято з потоку.

Текст по центру — це не те саме, що блок по центру

text-align: center центрує рядки всередині елемента, а не сам елемент. Блок як був на всю ширину батька, так і лишиться — просто його текст стане посередині.

Щоб посунути сам блок, потрібні margin-inline: auto (по горизонталі) або центрування з боку батька — grid чи flex.

Плутанина між цими двома речами — найчастіша причина «поставив по центру, а воно не по центру».

Вирівнювання по ширині має ціну

text-align: justify вирівнює обидва краї, розтягуючи пробіли. На вузькій колонці це дає «річки» — світлі прогалини, що тягнуться через кілька рядків, і читати стає важче.

Лікується переносами: hyphens: auto разом із lang="uk" на сторінці дозволяє браузеру переносити слова й розподіляти пробіли рівніше.

У стовпчику осі міняються місцями

При flex-direction: column головна вісь стає вертикальною. Тому align-items: center тепер центрує по горизонталі, а не по вертикалі, як у рядку.

Це та сама пастка, що описана в пісочниці Flexbox: люди ставлять column, хочуть зсунути вміст донизу й пишуть align-items, а треба justify-content.

Зворотний зв'язок
Вхід