Выравниваем блок по центру страницы. Все про CSS выравнивание

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS .

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle , где приводится отличное решение для вертикального центрирования. Вот еще несколько на эту тему.

Рассмотрим способ поближе.

Достоинства

• Кроссбраузерность (включая IE 8-10)
• Никакой дополнительной разметки, минимум стилей
• Адаптивность
• Независимость от padding (без box-sizing !)
• Работает для изображений

Недостатки

• Должна быть задана высота (см. Variable Height)
• Рекомендуется задать overflow: auto , чтобы контент не расползался
• Не работает на Windows Phone

Совместимость с браузерами Метод был протестирован, и прекрасно работает в Chrome, Firefox, Safari, Mobile Safari и даже IE 8-10. Один пользователь упоминал, что контент не выравнивается по вертикали на Windows Phone.Внутри контейнера Контент, размещенный в контейнер с position: relative будет прекрасно выравниваться:

Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

С использованием viewport Установим для контента position: fixed и зададим z-index:

Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; }

Адаптивность Главное преимущество описываемого способа - это прекрасная работа, когда высота или ширина задана в процентах, да еще и понимание min-width/max-width и min-height/max-height .

Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 400px; max-width: 500px; padding: 40px; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

Смещения Если на сайте присутствует фиксированная шапка или требуется сделать какой-то другой отступ, просто нужно добавить в стили код вроде top: 70px; Пока задан margin: auto; блок с контентом будет корректно центрироваться по высоте.

Еще можно выравнивать контент по нужной стороне, оставляя центрирование по высоте. Для этого нужно использовать right: 0; left: auto; для выравнивания справа или left: 0; right: auto; для выравнивания слева.

Absolute-Center.is-Right { width: 50%; height: 50%; margin: auto; overflow: auto; position: absolute; top: 0; left: auto; bottom: 0; right: 20px; text-align: right; }

Много контента Для того, чтобы большое количество контента не позволяло верстке разъезжаться, используем overflow: auto . Появится вертикальная прокрутка. Также можно добавить max-height: 100%; если у контента нет дополнительных отступов.
.Absolute-Center.is-Overflow { width: 50%; height: 300px; max-height: 100%; margin: auto; overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

Изображения Способ отлично работает и для изображений! Добавим стиль height: auto; тогда картинка будет масштабироваться вместе с контейнером.

Absolute-Center.is-Image { width: 50%; height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

Изменяемая высота Описываемый способ требует заданной высоты блока, которая может быть указана в процентах и контролироваться с помощью max-height , что делает метод идеальным для адаптивных сайтов. Один из способов не задавать высоту - использование display: table . При этом блок контента центрируется независимо от размера.

Могут возникнуть проблемы с кроссбраузерностью, возможно следует использовать способ с table-cell (описан ниже).

• Firefox/IE8: использование display: table выравнивает блок вертикально по верхней границе документа.
• IE9/10: использование display: table выравнивает блок по левому верхнему углу страницы.
• Mobile Safari: если ширина задана в процентах, страдает горизонтальное центрирование

.Absolute-Center.is-Variable { display: table; width: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

Другие способы Описанный способ отлично работает в большинстве случаев, но есть и другие методы, которые могут быть применимы для решения специфических задач.Отрицательный margin Наверное, самый популярный способ. Подходит, если известны размеры блока.

Is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ }
Преимущества:

• Кроссбраузерность
• Минимальный код

Недостатки:

• Не адаптивный
• Ползет верстка, если в контейнере слишком много контента
• Приходится компенсировать отступы или использовать box-sizing: border-box

Использование transform Один из самых простых способов, поддерживает изменение высоты. Есть подробная статья на эту тему - "Centering Percentage Width/Height Elements " от CSS-Tricks.

Is-Transformed { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
Преимущества:

• Изменяемая высота
• Минимальный код

Недостатки:

• Не работает в IE 8
• Использование префиксов
• Может мешать работе других эффектов с transform
• В некоторых случаях при рендеринге размываются края блока и текст

Table-cell Возможно один из самых лучших и простых способов. Подробно описан в статье "Flexible height vertical centering with CSS, beyond IE7 " от 456bereastreet. Главный недостаток - дополнительная разметка: требуется аж три элемента:

<!-- CONTENT -->
CSS:
.Pos-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; }
Преимущества:

• Изменяемая высота
• Верстка не едет при большом количестве текста в блоке
• Кроссбраузерность

Недостатки:

• Сложная структура

Flexbox Будущее CSS, flexbox будет решать множество сегодняшних проблем верстки. Подробно об этом написано в статье Smashing Magazine, которая называется Centering Elements with Flexbox .

Pos-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
Преимущества:

• Контаент может быть любой высоты или ширины
• Может использоваться в более сложных случаях

Недостатки:

• Нет поддержки IE 8-9
• Требуется контейнер или стили в body
• Требует множество разнообразных префиксов для корректной работы в современных браузерах
• Возможные проблемы производительности

Итог Каждый способ имеет преимущества и недостатки. По сути, выбор сводится к выбору браузеров, которые должны поддерживаться

У дизайнера иногда возникает вопрос: как центрировать элементы по вертикали ? И это вызывает определенные проблемы. Однако существует несколько методов для центрирования элементов по вертикали и каждый из этих методов достаточно прост. В этой статьи описаны некоторые из этих методов.

Чтобы увидеть каждый метод в действии, кликните по кнопке демо или по изображению.

Давайте обсудим некоторые моменты, которые препятствуют вертикальному центрированию.

Vertical-Align

Горизонтальное центрирование элемента достаточно легко реализовать (с помощью CSS). Встроенный элемент (inline) можно центрировать по горизонтали, назначив родительскому контейнеру свойство text-align со значением center . Когда элемент блочный, для центрирования ему достаточно задать ширину (width) и установить значения правого (margin-right) и левого (margin-left) поля на auto .

Относительно к тексту: многие для центрирования начинают использовать свойство vertical-align . Это логично и мой первый выбор был бы таким же. Чтобы центрировать элемент в таблице, можно использовать атрибут valign .

Однако атрибут valign работает только применительно к ячейке (например, ). Свойство CSS vertical-align можно применить к ячейке и к некоторым встроенным элементам.

• Текст центрируется относительно line-height (межстрочный интервал).
• Применительно к таблице, если не вдаваться в детали, центрирование происходит относительно высоты ряда.

К сожалению, свойство vertical-align нельзя применять к блочным элементам, например, таким как параграф (p) внутри тега div .

Однако существуют другие методы центрирования элементов по вертикали, и вы по-прежнему можете использовать свойство vertical-align там, где это необходимо. Какой метод использовать зависит от того, что вы собираетесь центрировать.

Межстрочный интервал или Line-height

Данный метод стоит использовать только тогда, когда вам нужно центрировать строчку текста. Для этого необходимо у элемента, который содержит текст, установить line-height (межстрочный интервал) больше чем размер шрифта.

По умолчанию образуется равное пространство над и под текстом, таким образом, текст центрируется по вертикали.

В данном случае высоту родительского элемента указывать необязательно.

Здесь текст

Об авторе

Вертикальное выравнивание line-height

Для выравнивания одной строки текста можно использовать одинаковые значения высоты и межстрочного интервала для блока-родителя. Подходит для кнопок, пунктов меню и проч.

line-height .wrapper { height: 100px; line-height: 100px; }

Я выровнен по вертикали

position и отрицательный margin вверх

Элемент можно выравнить по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin вверх, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:

Wrapper { position: relative; } elem { height: 200px; margin: -100px 0 0; position: absolute; top: 50%; }

Таким образом, используя позиционирование и отрицательные поля, можно центрировать элемент на странице.

display: table-cell

Для вертикального выравнивания применяется свойство display: table-cell элементу, которое заставляет эмулировать ячейку таблицы. Ему же задаем высоту и vertical-align: middle . Все это обернем в контейнер со свойством dislpay: table; :

Вертикальное выравнивание display: table-cell .wrapper { display: table; width: 100%; } .cell { display: table-cell; height: 100px; vertical-align: middle; }

Я выровнен по вертикали

Динамическое выравнивание элемента на странице

Мы рассмотрели способы выравнивания элементов на странице при помощи CSS. Теперь взглянем на реализацию варианта с jQuery.

Подключим jQuery на страницу:

Я предлагаю написать простую функцию центрирования элемента на странице, назовем ее alignCenter() . В качестве аргумента функции выступает сам элемент:

Function alignCenter(elem) { // код здесь }

В теле функции динамически вычислим и повесим координаты центра страницы свойствам CSS left и top:

Function alignCenter(elem) { elem.css({ left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" // не забывайте добавить элементу position: absolute для срабатывания координат }) }

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

Фукнция готова, остается навесить ее на события готовности DOM и ресайза окна:

$(function() { // вызов функции центрирования при готовности DOM alignCenter($(elem)); // вызов функции при ресайзе окна $(window).resize(function() { alignCenter($(elem)); }) // функция центрирования элемента function alignCenter(elem) { elem.css({ // вычисление координат left и top left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" }) } })

Применение Flexbox

Постепенно входят в повседневность новые возможности CSS3, такие как Flexbox. Технология помогает создавать разметку без использования float’ов, позиционирования и т.д. В том числе ее можно применять и для центрирования элементов. Например применим Flexbox для родительского элемента.wrapper и центрируем контент внутри:

Wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px; } .wrapper .content { margin: auto; /* margin: 0 auto; только по горизонтали */ /* margin: auto 0; только по вертикали */ } Lorem ipsum dolor sit amet

Это правило центрирует элемент по горизонтали и вертикали одновременно — margin работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.

Ресурсы по теме Помощь проекту