Ваша корзина пуста!
Корзина

В данной статье рассмотрим способы центрирования элементов на веб-странице при помощи различных техник в css.

Способов позиционирования элементов css, много! Начнем с простого.

Выравнивание элемента по горизонтали

Если, мы имеем дело со строчным элементом display: inline;, внутри родительского блока

Если, элемент блочный display:block;, укажем margin-left и margin-right в значение auto, запись в CSS в сокращении margin: 0 auto;. При этом надо явно указать ширину width: центрируемого элемента, иначе он займет всю ширину родителя. Значение margin: 0 auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto, то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине.

Вертикальное выравнивание элементов

Строчный элемент, внутри родительского блока, можно отцентрировать с помощью свойства line-height, задав им одинаковую высоту. Что приведет к выравниванию текста по центру. Тут есть важный момент, текст должен быть в одну строку, и не иметь переносов на любых разрешениях

в этом примере используется и выравнивание по горизонтали, которое мы рассматривали выше.

Центрирование элемента при помощи 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+

Решение с абсолютным позиционированием

-С фиксированными габаритами элемента

element {

 position: absolute;

 top: calc(50%-60px);

 left: calc(50%-45px);

 width: 120px;

 height: 70px;

}

 

-Вертикальное позиционирование без указания конкретных габаритов

element {

 position: absolute;

 top: 50%;

 left: 50%; 

 transform: translate(-50%, -50%);

}

Абсолютное позиционирование не всегда подходит к использованию, может изменить весь макет, и если центрируемый элемент выше окно просмотра, то он обрезается сверху.

Позиционирование элементов с единицами измерения 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 дочернему элементу ↓

Глобальная поддержка CSS Flexible Box Layout Module браузерами на данный момент составляет 97,32%. Посмотреть поддержку можно на Can I use.

Выравнивание элементов с помощью Grid

CSS Grid layout приносит инструмент двумерного макета в Веб, с возможностью размещения элементов в строках и столбцах. CSS сетка может использоваться для достижения многих различных макетов. Он разделяет страницу на крупные регионы, или определяет отношения с точки зрения размера, положения и слоя, между частями элемента управления, построенных из HTML примитивов.

Исходя из вышеизложенного, надо понимать, что Grid layout это уже система, для построения целого макета страницы, и использовать ее для выравнивания конкретного блока не совсем корректно. Но для наглядности пример ниже, он очень схож с Flexbox 

Глобальная поддержка CSS Grid Layout на дату выпуска статьи составляет 88,11%. Проверить можете по ссылке выше «Can I use».

Успехов!


Новости из этой категории
02.02.2019 15:31 5319
Адаптивная Recapcha
Всем привет! В данной статье рассмотрим решения пр..