Способы позиционирования элементов на веб-странице

Способы позиционирования элементов

ПОДЕЛИТЬСЯ СТАТЬЕЙ:


В данной статье рассмотрим способы центрирования элементов на веб-странице при помощи различных техник в 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% высоты окна просмотра.

 

- Вертикальное выравнивание с известной шириной блока

 

See the Pen vh_center by Vladimir (@Landlord) on CodePen.

 

Данный вариант ограничен, и решает задачу с выравниванием по вертикали относительно окна просмотра.

 

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».

За сим все. Успехов!