Центрирование - один из самых сложных аспектов 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.