Выравнивание div’ов по центру

Среда, Март 22, 2017, 17:13 | Вебмастеру | 166 просм. | Нет комментариев

Много лет проблема выравнивания div’ов по центру была головной болью web-верстальщиков. Единственная таблетка, предлагаемая спецами, которая к тому же и не помогала:

margin: 0px;

Но все изменилось после того, как в CSS появился элемент Flexbox. Вернее, это целый комплекс элементов, гораздо более гибкий, чем контейнеры

display: box;

Строят его из двух частей: flex-контейнера и дочерних элементов внутри него. Эти дочерние элементы можно выстраивать как угодно – и в ряд, и столбиком, и задавать интервалы между ними и много чего еще. К нему неприменимы старые добрые атрибуты float, margin, clear, vertical-align. Однако это не повод для расстройства, так как вместо них используются другие. Кроме того, элементы флекса приспосабливаются к любому размеру экрана, их отображение можно упорядочить в любом направлении.

Впрочем, это все тема для большой отдельной статьи, а здесь просто привожу рецепт div’ного выравнивания блока по центру страницы. Вот он:

.flexcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

То есть создаем родительский контейнер (display: flex;), а затем указываем, как располагать в нем дочерние элементы. Свойства align-items и justify-content как раз и нужны, чтобы выстроить содержимое внутри контейнера по центру (по вертикальной и горизонтальной оси соответственно).

В заключение – список популярных браузеров, поддерживающих технологию Flexbox (все свойства):

  • Chrome 49+
  • Mozilla Firefox 51+
  • IE 11
  • Opera 43+
  • Opera mini

Есть и более старые версии браузеров, поддерживающих эту технологию, но не в полном объеме.

Похожие записи:

Понравилось? Поделись ссылкой с друзьями!

Метки: , ,

Оставить комментарий


− два = 2