Меню
ГлавнаяОшибки

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

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

1. Горизонтальное выравнивание по центру блока/страницы 1.1. Если для блока задана ширина: div { width: 300px; margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/ }

Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;

1.2. Если блок вложен в другой блок и для него не задана/задана ширина: .wrapper {text-align: center;} 1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока: .wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/} .box { width: 400px; position: absolute; left: 50%; margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/ } 1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки: .wrapper {text-align: center; /*располагаем содержимое блока по центру*/} .box { display: inline-block; /*располагаем блоки в ряд по горизонтали*/ margin-right: -0.25em; /*убираем правый отступ между блоками*/ } 2. Вертикальное выравнивание 2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню: .button { height: 50px; line-height: 50px; } 2.2. Для выравнивания блока по вертикали внутри родительского блока: .wrapper {position: relative;} .box { height: 100px; position: absolute; top: 50%; margin: -50px 0 0 0; } 2.3. Вертикальное выравнивание по типу таблицы: .wrapper { display: table; width: 100%; } .box { display: table-cell; height: 100px; text-align: center; vertical-align: middle; } 2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока: .wrapper { position: relative; } .box { height: 100px; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: auto; /*чтобы контент не расползался*/ } 2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:

если для элемента заданы размеры

div { width: 300px; /*задаем ширину блока*/ height:100px; /*задаем высоту блока*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }

если для элемента не заданы размеры и он не пустой

Some text here h1 { margin: 0; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; }

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

Горизонтальное выравнивание margin: auto

Выравнивание по горизонтали при помощи margin используется при известной ширине центрируемого элемента. Работает для блочных элементов:

Elem { margin-left: auto; margin-right: auto; width: 50%; }

Указание значения auto правого и левого отступа делает их равными, что и центрирует элемент по горизонтали в пределах родительского блока.

text-align: center

Данный способ подходит для выравнивания по центру текста в пределах блока. text-align: center:

Выравнивание с помощью text-align .wrapper { text-align: center; }

Я выровнен по центру

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

Подойдет для центрируемых блоков известной ширины. Задаем родительскому блоку position: relative для позиционирования относительно него, центрируемому элементу position: absolute , left: 50% и отрицательный margin-left , значение которого равно половине ширины элемента:

Выравнивание с помощью position .wrapper { position: relative; } .wrapper p { left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; }

Я выровнен по центру

display: inline-block + text-align: center

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

Выравнивание с помощью display: inline-block + text-align: center; .navigation { text-align: center; } .navigation li { display: inline-block; }

  • Главная
  • Об авторе

Вертикальное выравнивание 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 работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.

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

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

Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:

Горизонтальная центровка с помощью text-align

Порой, самое простое решения является самым лучшим:

Div.center { text-align: center; background: hsl(0, 100%, 97%); } div.center img { width: 33%; height: auto; }

Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.

Центровка с помощью margin: auto

Ещё одно решения для горизонтальной центровки:

Div.center { background: hsl(60, 100%, 97%); } div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }

Заметьте что для этого способа нужно выставить свойство display: block.

Центровка с помощью table-cell

Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.

Center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; } .center-core { display: table-cell; text-align: center; vertical-align: middle; } .center-core img { width: 33%; height: auto; }

Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.

Абсолютная центровка

Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:

Absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%); } .absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

Центрируем с помощью translate

Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:

Center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; } .center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto; }

Есть несколько минусов:

  • Свойство CSS transform требует использование браузерных префиксов
  • Не работает в старых версиях IE (8 и ниже)
  • Внешнему контейнеру нужно задавать высоту.
  • Если внутри контейнера есть текст, то он может быть немного размыт.
Центровка с помощью вида отображения flex

Наверное самый простой вариант.

Center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; } .center img { width: 30%; height: auto; }

Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:

Center { background: hsl(240, 100%, 97%); display: -webkit-box; /* Safari, iOS 6 и ранних версиях; Android, старых WebKit */ display: -moz-box; /* Firefox (может и глючить) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome 21+ */ display: flex; /* Opera 12.1+, Firefox 22+ */ -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; }

Центровка с помощью calc

В некоторых случаях, данный способ более универсален чем использование flexbox:

Center { background: hsl(300, 100%, 97%); min-height: 600px;position: relative; } .center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); }

Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:

Top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));

На практике вы можете обнаружить, что данный метод работает отлично, если нам известны размеры элементов:

Center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px - 2)); }

Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:

Center img { width: 40%; height: auto; position: absolute; top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%); top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%); top: calc(50% - 20%); left: calc(50% - 20%); }

Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (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
  • Требует множество разнообразных префиксов для корректной работы в современных браузерах
  • Возможные проблемы производительности
Итог Каждый способ имеет преимущества и недостатки. По сути, выбор сводится к выбору браузеров, которые должны поддерживаться

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

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

В css выровнять блок по центру легко. Это самый известный многим прием, но о нем я хотел бы рассказать именно сейчас, в первую очередь. Здесь подразумевается выравнивание по центру по горизонтали относительно родительского элемента. Как оно осуществляется? Допустим, у нас есть контейнер и в нем наш подопытный:

< div id = "wrapper" >

< div id = "header" > < / div >

< / div >

Предположим, что это шапка сайта. Она не тянется на всю ширину окна и нам надо ее отцентрировать. Пишем так:

#header{

width / max - width : 800px ;

margin : 0 auto ;

Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!

Выравнивание текста

Это тоже очень простой прием. Для выравнивания всех строчных элементов можно использовать свойство text-align и его значения: left, right, center. Последнее центрирует текст, что нам и нужно. Таким же образом можно выровнять даже картинку, потому что она тоже по умолчанию является строчным элементом.

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

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

Задать высоту блока с помощью внутренних отступов. Способ заключается в том, чтобы не задавать явную высоту с помощью height, а создать ее искусственно с помощью paddingов сверху и снизу, которые должны быть одинаковы. Создадим любой блок и запишем ему такие свойства:

div{ background: #ccc; padding: 30px 0; }

div {

background : #ccc;

padding : 30px 0 ;

Фон просто для того, чтобы визуально видеть края, а также внутренние отступы. Теперь высоту блока составляют два этих отступа и сама строка, а выглядит все это так:

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

div{ height: 60px; line-height: 60px; }

div {

height : 60px ;

line - height : 60px ;

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

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

div{ display: table-cell; vertical-align: middle; }

div {

display : table - cell ;

vertical - align : middle ;

Этот способ хорош тем, что вы сможете выровнять сколько угодно текста по центру. Но блоку, в который вложен наш div лучше прописать display: table, иначе может не работать.

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

Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.

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

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

А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!