Центрування речей - один із найскладніших аспектів 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.