Привіт:) Цей пост про вертикальне та горизонтальне вирівнювання по центру 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, то ліворуч і праворуч буде однаковий відступ. А тому елемент опиниться в середині.
back to contents ↑Детальніше із роботою обчислень відступів можете ознайомитися в оф. специфікації.
Зображення
Також цей метод підходить для горизонтального центрування зображень. Так як <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>
