Центрування елементів у 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>

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *