Центрування елементів у CSS
Привіт:) Цей пост про вертикальне та горизонтальне вирівнювання по центру HTML-елементів за допомогою CSS.
У CSS є декілька технік центрування, які використовуються в залежності від типу елементу (блоковий або рядковий) та його позиціонування.
Горизонтальне центрування
Рядкові (інлайнові) елементи
Для цього випадку достатньо використати директиву text-align: center
.
<style>
.wrapper {
width: 500px;
height: 150px;
padding: 5px;
outline: 1px solid red;
}
.centering {
text-align: center;
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<h1 class="centering">Text</h1>
<p class="centering">Text</p>
<div class="centering">Text</div>
</div>
до змісту ↑Блокові елементи
У цьому випадку властивість text-align
не працюватиме. Для коректного вирівнювання використовують margin
. Властивість можна вказати 3-ма варіантами:
/* ВАРІАНТ 1 */
margin: auto;
/* ВАРІАНТ 2 */
margin: 0 auto;
/* ВАРІАНТ 3 */
margin-left: auto;
margin-right: auto;
Кінцевий код:
<style>
.wrapper {
width: 500px;
height: 100px;
padding: 5px;
outline: 1px solid red;
}
.centering {
width: 100px;
margin: 0 auto;
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<div class="centering">Text</div>
</div>
Значення auto
властивості margin
, на відміну від width
та height
, самостійно не з'являється. Зазвичай margin
рівна конкретній величині елемента, наприклад 0
для div
. Потрібно встановити її явно.
Значення margin-left: auto
та margin-right: auto
змушують браузер виділяти під margin
весь доступний збоку простір. А якщо й те, й інше рівне auto
, то ліворуч і праворуч буде однаковий відступ. А тому елемент опиниться в середині.
Зображення
Також цей метод підходить для горизонтального центрування зображень. Так як <img>
є рядковим (інлайновим) тегом, то важливо його зробити блоковим:
<style>
.wrapper {
width: 500px;
height: 100px;
padding: 5px;
outline: 1px solid red;
}
.centering {
display: block;
margin: 0 auto;
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<img class="centering" src="https://placehold.co/100x50.png" alt="Image">
</div>
до змісту ↑Абсолютно позиціонований елемент
Ще один випадок, коли елемент позиціонується абсолютно. У такому разі важливо визначити, відносно якого саме батьківського елементу. Останньому потрібно присвоїти position: relative
. Точно визначену ширину батьківському елементу (у прикладі це <div>
із класом wrapper
) вказувати не обов'язково.
<style>
.wrapper {
position: relative;
width: 500px; /* ширина не обов'язкова */
height: 100px;
padding: 5px;
outline: 1px solid red;
}
.centering {
position: absolute;
left: 50%;
transform: translateX(-50%); /* або transform: translate(-50%, 0); */
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<div class="centering">Текст</div>
</div>
до змісту ↑Flex-елементи
Цей спосіб передбачає використання flex-контейнера, всередині якого й будуть центруватися елементи, незалежно від їх типу (рядкові чи блокові).
У коді нижче я створив 2 однакових div-контейнери з класом wrapper
. Для прикладу в одному помістив блоковий елемент, а в іншому — рядковий (інлайновий).
<style>
.wrapper {
display: flex;
justify-content: center;
width: 500px;
height: 100px;
padding: 5px;
outline: 1px solid red;
}
.centering {
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<div class="centering">Текст</div>
</div>
<div class="wrapper">
<p class="centering">Абзац</p>
</div>
до змісту ↑Вертикальне центрування
Вертикальне вирівнювання по центру початково не було визначене у специфікації CSS. Але із зростом складності макетів використовується постійно.
Розгляну різні випадки.
Один рядок тексту
Нехай є елемент (рядковий або блоковий: <p>
, <span>
або <div>
), у якому всього лише один рядок, а його контейнер має визначену висоту. У такому випадку достатньо цьому елементові задати властивість line-height
із значенням, рівним висоті контейнера. Властивість спрацює як для контейнера, так і для елемента із одним рядком.
<!-- ВАРІАНТ 1 -->
<style>
.wrapper {
width: 500px;
height: 100px;
padding: 5px;
line-height: 100px;
outline: 1px solid red;
}
.centering {
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<!-- Тут може бути блоковий або інлайновий елемент -->
<span class="centering">Абзац</span>
</div>
<!-- ВАРІАНТ 2 -->
<style>
p {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 500px;
height: 100px;
padding: 5px;
outline: 1px solid red;
}
.centering {
line-height: 100px;
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<!-- Тут може бути блоковий або інлайновий елемент -->
<p class="centering">Абзац</p>
</div>
Абсолютно позиціонований елемент
Абсолютно позиціоновані блоки теж коректно центруються вертикально.
<style>
.wrapper {
position: relative;
width: 500px;
height: 100px;
padding: 5px;
outline: 1px solid red;
}
.centering {
position: absolute;
top: 50%;
transform: translateY(-50%); /* або transform: translate(0, -50%); */
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<span class="centering">Абзац</span>
</div>
до змісту ↑Властивість vertical-align
Спеціально для таблиць є окрема властивість vertical-align
, яка керує вертикальним розташуванням елемента в комірці. Також її можна використати й для інших HTML-тегів.
Для таблиці код буде наступним:
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid blue;
height: 100px;
}
</style>
<table>
<tr>
<td style="vertical-align: top">Зверху</td>
<td style="vertical-align: middle">У центрі</td>
<td style="vertical-align: bottom">Знизу</td>
</tr>
</table>
У комірці таблиці з vertical-align: middle
вміст знаходиться по центру. А тому можна обернути потрібний елемент в таблицю розміру width: 100%
;
У випадку будь-якого іншого тегу (не <table>
):
<style>
.wrapper {
display: table-cell;
vertical-align: middle;
width: 500px;
height: 100px;
padding: 5px;
outline: 1px solid red;
}
.centering {
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<h2 class="centering">Заголовок H2</h2>
</div>
Цей спосіб крутий тим, що не вимагає явного вказання висоти елементів. Однак він має особливість. Разом з vertical-align
батьківський блок отримує табличний алгоритм обчислення ширини і починає підлаштовуватись під вміст. А це не завжди бажано. Щоб його розтягнути, потрібно для батьківського блоку явно вказати width
.
Flex-елементи
Тут все просто:
<style>
.wrapper {
display: flex;
align-items: center;
width: 500px;
height: 100px;
padding: 5px;
outline: 1px solid red;
}
.centering {
outline: 1px solid blue;
}
</style>
<div class="wrapper">
<span class="centering">Текст</span>
</div>