Центрування речей - один із найскладніших аспектів CSS.
Самі методи, як правило, не важкі для розуміння. Натомість це більше пов’язано з тим, що існує так багато способів центрувати речі.
Метод, який ви використовуєте, може змінюватися залежно від елемента HTML, який ви намагаєтеся відцентрувати, або від того, чи ви центруєте його горизонтально чи вертикально.
У цьому підручнику ми розглянемо, як центрувати різні елементи по горизонталі, вертикалі, як вертикально, так і горизонтально.
Як центрувати по горизонталі
Центрувати елементи по горизонталі, як правило, простіше, ніж вертикально. Ось декілька загальних елементів, які ви можете захотіти відцентрувати горизонтально, та різні способи зробити це.
Як центрувати текст за допомогою властивості Центру вирівнювання тексту CSS
Щоб відцентрувати текст або посилання горизонтально, просто використовуйте text-alignвластивість зі значенням center:
Hello, (centered) World!
p { text-align: center; }
Як відцентрувати Div за допомогою автоматичного маржування CSS
Скористайтесь скороченою marginвластивістю зі значенням 0 autoдля центрування елементів рівня блоку, наприклад по divгоризонталі:
.child { ... margin: 0 auto; }
Як відцентрувати Div по горизонталі за допомогою Flexbox
Flexbox - це найсучасніший спосіб центрувати речі на сторінці і робить проектування адаптивних макетів набагато простішим, ніж раніше. Однак він не повністю підтримується в деяких застарілих браузерах, таких як Internet Explorer.
Щоб відцентрувати елемент горизонтально за допомогою Flexbox, просто застосуйте display: flexта justify-content: centerдо батьківського елемента:
.container { ... display: flex; justify-content: center; }
Як центрувати вертикально
Центрування елементів по вертикалі без сучасних методів, таких як Flexbox, може бути справжньою справою. Тут ми розглянемо деякі старіші методи, щоб спершу відцентрувати речі, а потім покажемо, як це зробити за допомогою Flexbox.
Як центрувати дайв вертикально за допомогою абсолютного позиціонування та негативних полів CSS
Довгий час це був спосіб спрямувати речі вертикально. Для цього методу ви повинні знати висоту елемента, який потрібно відцентрувати.
Спочатку встановіть для displayвластивості батьківського елемента значення relative.
Тоді для дочірнього елемента, встановіть displayвластивість absoluteі topв 50%:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }
Але це насправді просто вертикально центрує верхній край дочірнього елемента.
Щоб по-справжньому центрувати дочірній елемент, встановіть для margin-topвластивості -(half the child element's height):
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }
Як центрувати Div вертикально за допомогою Transform and Translate
Якщо ви не знаєте висоту елемента, який ви хочете відцентрувати (або навіть якщо знаєте), цей метод є чудовим трюком.
Цей метод дуже схожий на метод негативних полів, наведений вище. Встановіть для displayвластивості батьківського елемента значення relative.
Для дочірнього елемента встановіть для displayвластивості absoluteта встановіть topзначення 50%. Тепер замість того, щоб використовувати негативне поле для справжнього центру дочірнього елемента, просто використовуйте transform: translate(0, -50%):
.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }
Зверніть увагу, що translate(0, -50%)це скорочення для translateX(0)і translateY(-50%). Ви також можете написати, transform: translateY(-50%)щоб центрувати дочірній елемент вертикально.
Як центрувати Div вертикально за допомогою Flexbox
Подібно до центрування речей по горизонталі, Flexbox дозволяє надзвичайно легко відцентрувати речі по вертикалі.
Щоб відцентрувати елемент по вертикалі, застосуйте display: flexі align-items: centerдо батьківського елемента:
.container { ... display: flex; align-items: center; }
Як центрувати як вертикально, так і горизонтально
Як відцентрувати дайв по вертикалі та горизонталі за допомогою абсолютного позиціонування та негативних полів CSS
Це дуже схоже на метод, наведений вище, для центрування елемента по вертикалі. Як і минулого разу, ви повинні знати ширину та висоту елемента, який потрібно відцентрувати.
Встановіть для displayвластивості батьківського елемента значення relative.
Потім встановіть для displayвластивості дитини значення absolute, topдо 50%і leftдо 50%. Це просто центрує верхній лівий кут дочірнього елемента по вертикалі та горизонталі.
Щоб по-справжньому відцентрувати дочірній елемент, застосуйте від'ємне верхнє поле, встановлене до половини висоти дочірнього елемента, і від'ємне ліве поле, встановлене до половини ширини дочірнього елемента:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }
Як центрувати Div вертикально та горизонтально за допомогою Transform and Translate
Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.
First, set the display property of the parent element to relative.
Next, set the child element's display property to absolute, top to 50%, and left to 50%.
Finally, use transform: translate(-50%, -50%) to truly center the child element:
.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
How to Center a Div Vertically and Horizontally with Flexbox
Flexbox is the easiest way to center an element both vertically and horizontally.
This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:
.container { ... display: flex; justify-content: center; align-items: center; }
That's everything you need to know to center with the best of 'em. Now go forth and center all the things.