Основні способи вертикального вирівнювання елементів в CSS

Одна з найпопулярніших проблем, з якими стикаються веб-дизайнери – це вертикальне центрування елементів в CSS і правильне їх відображення на девайсах з різними розмірами екрану. І складність не в тому, що це важко зробити, а в тому, що існує кілька різних способів для цього і всі вони мають право на життя. У цій статті ми розглянемо сім найпопулярніших і, що найголовніше, — робочих методів вертикального вирівнювання елементів за допомогою CSS.

 

 

7 основних способів вертикального центрування в CSS

Для тестування способів будемо використовувати блок div, в який вкладено текстовий елемент p з текстом-рибою:

 

<div class="blok first">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo fermentum orci, in iaculis mi volutpat in. Vestibulum sit amet cursus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque bibendum malesuada tellus vitae accumsan. Vivamus sed metus efficitur, vehicula mauris in, elementum massa.</p>
</div>

 

Ми надамо блоку div кілька загальних стилів, а потім всі зусилля щодо вирівнювання будемо спрямовувати на текстовий елемент. Насамперед надамо текстовому блокові фонового кольору, щоб візуально позначити розмір блоку, а також обнулимо margin і padding, що дозволить уникнути зайвих непорозумінь при верстці:

 

.blok {
  position: relative;
  background: #fff;
  margin: 25px;
  padding: 25px;
  min-height: 150px;
  font-size: 25px;
  overflow: hidden;
  color: #333;
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.25), 0 5px 3px rgba(0, 0, 0, 0.10);
  transition: all 0.15s ease;
}
.blok p {
  margin: 0;
  padding: 0;
  background-color: #eee;
}

 

 

Тепер перейдемо безпосередньо до розгляду можливих варіантів вертикального центрування:

 

 

• 1) Абсолютне позиціонування (position: absolute;)

Найбільш очевидним способом, за допомогою якого можна помістити елемент у потрібне місце, виступає використання абсолютного позиціонування:

 

.first p {
    width: 80%;
    height: 80%;
    vertical-align: middle;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; 
}

 

Цей метод відмінно працює для блокових елементів і картинок, оскільки за допомогою певної висоти, ширини і, завдяки автоматичним відступами, вирівняє їх точно по центру батьківського елемента. Але у текстових елементів цей метод працює не зовсім ідеально: текст завжди буде починатися в верхньому лівому кутку абзацу, тому при різній кількості текстового контенту він не буде розташовуватися точно по центру.

Оскільки текст може мати різні розміри шрифтів, ми не зможемо точно спрогнозувати висоту абзацу у всіх випадках адаптивної верстки, і іноді трапляються випадки занадто вузького блоку з дуже високим розтягнутим текстовим блоком. З цієї причини абсолютне позиціонування не підходить для вертикального центрування всього того, чому не можна привласнити певну висоту і ширину.

 

 

• 2) Трансформація (transform)

Як і при абсолютному позиціонуванні, для трюка із використанням трансформації також потрібно вказувати висоту його батьківського елемента, щоб браузер зміг обчислити «центральне» розташування. На відміну від абсолютного позиціонування, ця висота може бути динамічним значенням (наприклад, у відсотках або vh).

 

.second {
  height: 150px;
}
.second p {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

 

За допомогою relative позиціонування відступ зверху буде 50% від верхньої точки батьківського елемента div, а властивість трансформації translateY також відобразить вміст контенту вертикально на рівні 50% від його висоти. Цей метод відмінно працює для елементів, у яких немає явних вказівок висоти і ширини.

 

 

• 3) Висота лінії (line-height)

Цей метод є найкращим для тих випадків, коли елемент для вирівнювання має конкретні значення висоти. А сам елемент невеликий (наприклад, кнопки, іконки і т.п.). Для великих текстових блоків цей метод не дуже підходить.

 

.third {
  width: 250px;
  height: 75px;
  line-height: 75px;
  border-radius: 15px;
  margin: 0 auto;
  padding: 0;
  min-height: auto;
  text-align: center;
}

 

Для цього методу важливо використовувати в стилях вказівку такої ж висоти, як і для властивості line-height – це гарантує знаходження точного вертикального центру. Якщо потрібно ще й горизонтальне центрування, тоді не забудьте вказати для елемента text-align: center;.

 

 

• 4) Відступи (padding)

Якщо батьківський елемент має зазначену висоту, ви завжди можете центрувати його вміст за допомогою однакових відступів.

 

.blok.fourth {
    height: 33vh;
}
.fourth p {
    padding: 16.5vh 8.25vh;
}

 

Оскільки наш батьківський елемент div має висоту 33vh, центральна точка буде 16.5vh (саме тому такий відступ зверху і знизу). Відступи зліва і справа залежать від ширини блоку. Оскільки vh – це адаптивне значення, з його використанням контент буде збільшуватися або зменшуватися при різних розмірах батьківського елемента.

Однак наступний спосіб (використання display: table;) позбавляє нас від ручних обчислень і робить це автоматично.

 

 

• 5) Таблична властивість (display: table;)

Це дуже простий і ефективний метод центрування контенту. Не плутайте властивість table із тегом <table>!

 

.fifth {
  display: table;
}
.fifth p {
  display: table-cell;
  vertical-align: middle;
}

 

Цей метод відмінно підходить для адаптивної верстки і центрує з середини абзацу, а не з верхнього лівого кута (як у першому методі).

 

 

• 6) Flexbox (display: flex;)

Властивість CSS display: flex; дає нам найбільш динамічний набір інструментів для верстки, і це найкращий метод при роботі зі складними структурами всередині батьківських елементів. Позиціонує елементи на зразок того, як це робить таблична властивість у попередньому методі.

 

.sixth {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

 

 

• 7) Комбінування методів

І, нарешті, ще один, бонусний метод! Якщо у вашій верстці використовується досить складна структура з багатьма елементами, тоді, можливо, найкращим способом буде комбінування методів. Наприклад, для елементів верхнього рівня використовувати flexbox, а для елементів нижнього рівня відступи і line-height.

 

 

Нижче представлено демо всіх основних способів вертикального центрування контенту. Спробуйте погратися з різними значеннями властивостей, можливо у вас вийде щось якісно нове.

 

 

 

Який метод краще?

Вибирати вам, у кожному індивідуальному випадку. Кращий метод по простоті і реалізації – це display: table;. А для складних макетів, які вимагають більшої гнучкості – метод flexbox.

Якщо у вас є питання і/або зауваження щодо цієї статті, залишайте їх у формі коментування нижче.
 
почитати по темі: Основні трюки CSS стилів для вебмайстрів початківців