В данной статье рассмотрим способы центрирования элементов на веб-странице при помощи различных техник в css.
Способов позиционирования элементов css, много! Начнем с простого.
Выравнивание элемента по горизонтали
Если, мы имеем дело со строчным элементом display: inline;, внутри родительского блока ↓
See the Pen inline_center by Vladimir (@Landlord) on CodePen.
Если, элемент блочный display:block;, укажем margin-left и margin-right в значение auto, запись в CSS в сокращении margin: 0 auto;. При этом надо явно указать ширину width: центрируемого элемента, иначе он займет всю ширину родителя. Значение margin: 0 auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto, то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. ↓
See the Pen block_center by Vladimir (@Landlord) on CodePen.
Вертикальное выравнивание элементов
Строчный элемент, внутри родительского блока, можно отцентрировать с помощью свойства line-height, задав им одинаковую высоту. Что приведет к выравниванию текста по центру. Тут есть важный момент, текст должен быть в одну строку, и не иметь переносов на любых разрешениях ↓
See the Pen vertical_center by Vladimir (@Landlord) on CodePen.
в этом примере используется и выравнивание по горизонтали, которое мы рассматривали выше.
Центрирование элемента при помощи display: table
Перейдем к более функциональным способам.
-Горизонтальное выравнивание:
element {
display: table;
margin: auto;
}
Это схоже по поведению с блочным элементом, у которого задана фиксированная ширина, но при этом ширина таблицы динамическая.
-Вертикальное выравнивание:
element {
display: table;
}
Затем элементу, который является дочерним в HTML разметке, задаем следующие свойства и значения
element {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Происходит это за счет того, что ячейка table-cell, растягивается на всю ширину таблицы, а содержимое внутри ячейки просто центрируется внутри неё при помощи text-align и vertical-align. Данный вариант поддерживается во всех современных браузерах, и в IE8+ ↓
See the Pen table_center by Vladimir (@Landlord) on CodePen.
Решение с абсолютным позиционированием
-С фиксированными габаритами элемента
element {
position: absolute;
top: calc(50%-60px);
left: calc(50%-45px);
width: 120px;
height: 70px;
}↓
See the Pen absolute_center_size by Vladimir (@Landlord) on CodePen.
-Вертикальное позиционирование без указания конкретных габаритов
element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}↓
See the Pen absolute_center_respon by Vladimir (@Landlord) on CodePen.
Абсолютное позиционирование не всегда подходит к использованию, может изменить весь макет, и если центрируемый элемент выше окно просмотра, то он обрезается сверху.
Позиционирование элементов с единицами измерения vh
После выхода спецификации CSS Value and Units Level 3 (https://www.w3.org/TR/css-values/#viewport-relative-lemghts), появились новые единицы измерения.Они завязанны на размер окна просмотра.
- vw - ширина окна просмотра. 1vw = 1% ширины окна просмотра.
- vh - высота окна просмотра. 1vh = 1% высоты окна просмотра.
- Вертикальное выравнивание с известной шириной блока ↓
Данный вариант ограничен, и решает задачу с выравниванием по вертикали относительно окна просмотра.
Flex выравнивание элементов
Это лучшее решение на данный момент, спецификация flexbox разработана специально для решения подобных задач, и не только. Все что нам нужно, - это дать родителю display: flex, и margin: auto дочернему элементу ↓
See the Pen flex_center by Vladimir (@Landlord) on CodePen.
Глобальная поддержка CSS Flexible Box Layout Module браузерами на данный момент составляет 97,32%. Посмотреть поддержку можно на Can I use.
Выравнивание элементов с помощью Grid
CSS Grid layout приносит инструмент двумерного макета в Веб, с возможностью размещения элементов в строках и столбцах. CSS сетка может использоваться для достижения многих различных макетов. Он разделяет страницу на крупные регионы, или определяет отношения с точки зрения размера, положения и слоя, между частями элемента управления, построенных из HTML примитивов.
Исходя из вышеизложенного, надо понимать, что Grid layout это уже система, для построения целого макета страницы, и использовать ее для выравнивания конкретного блока не совсем корректно. Но для наглядности пример ниже, он очень схож с Flexbox ↓
See the Pen Grid_center by Vladimir (@Landlord) on CodePen.
Глобальная поддержка CSS Grid Layout на дату выпуска статьи составляет 88,11%. Проверить можете по ссылке выше «Can I use».
За сим все. Успехов!
Буду благодарен за оценку статьи
