Много лет проблема выравнивания 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
Есть и более старые версии браузеров, поддерживающих эту технологию, но не в полном объеме.