Центрирование - один из самых сложных аспектов CSS.
Сами методы обычно нетрудно понять. Скорее, это связано с тем, что существует множество способов сосредоточить внимание.
Используемый метод может варьироваться в зависимости от HTML-элемента, который вы пытаетесь центрировать, а также от того, центрируете ли вы его по горизонтали или по вертикали.
В этом уроке мы рассмотрим, как центрировать различные элементы по горизонтали, вертикали, а также по вертикали и горизонтали.
Как центрировать по горизонтали
Центрировать элементы по горизонтали, как правило, проще, чем центрировать их по вертикали. Вот несколько общих элементов, которые вы можете захотеть центрировать по горизонтали, и разные способы сделать это.
Как центрировать текст с помощью свойства CSS Text-Align Center
Чтобы центрировать текст или ссылки по горизонтали, просто используйте text-align
свойство со значением center
:
Hello, (centered) World!
p { text-align: center; }


Как центрировать Div с помощью CSS Margin Auto
Используйте сокращенное 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.
Как центрировать Div по вертикали с помощью CSS Absolute Positioning и Negative Margins
Долгое время это был способ центрировать вещи по вертикали. Для этого метода вы должны знать высоту элемента, который вы хотите центрировать.
Сначала установите для 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; }

Как центрировать как по вертикали, так и по горизонтали
Как центрировать Div по вертикали и горизонтали с помощью CSS Absolute Positioning и Negative Margins
Это очень похоже на метод выше, чтобы центрировать элемент по вертикали. Как и в прошлый раз, вы должны знать ширину и высоту элемента, который вы хотите центрировать.
Установите для 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.