Выравнивание элементов. Способы вертикального выравнивания по центру в CSS
Сегодняшняя статья направлена на то, чтобы показать, как при помощи нескольких CSS-трюков выровнять div по центру, как по горизонтали, так и по вертикали. Также мы расскажем, как произвести центрирование по всей странице либо в отдельно взятом div-элементе .
Простое центрирование DIV-элемента на страницеЭтот метод будет отлично работать во всех браузерах.
CSSCenter-div { margin: 0 auto; width: 100px; }
Пример
Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .
Центрируем DIV внутри DIV-элемента старым способомЭтот метод div выравнивания по центру будет работать во всех браузерах.
CSSOuter-div { padding: 30px; } .inner-div { margin: 0 auto; width: 100px; }
HTMLПример
Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина (width ).
Центрируем DIV внутри DIV-элемента с помощью inline-blockВ этом методе центрирования div внутри div необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8 .
CSSOuter-div { padding: 30px; text-align: center; } .inner-div { display: inline-block; padding: 50px; }
HTMLПример
Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока (inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .
Центрируем DIV внутри DIV-элемента горизонтально и вертикальноЗдесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.
CSSOuter-div { padding: 30px; } .inner-div { margin: auto; width: 100px; height: 100px; }
HTMLПример
У внутреннего div-элемента должна быть указана ширина (width ) и высота (height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.
Центрируем DIV по нижней границе страницыЗдесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.
CSSOuter-div { position: absolute; bottom: 30px; width: 100%; } .inner-div { margin: 0 auto; width: 100px; height: 100px; background-color: #ccc; }
HTMLПример
У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .
Центрируем DIV на странице вертикально и горизонтальноЗдесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.
CSSCenter-div { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; }
Пример
У div-элемента должна быть установлена ширина (width ) и высота (height ).
Делаем адаптивное центрирование DIV-элемента на страницеЗдесь для выравнивания div по центру средствами CSS мы делаем ширину div-элемента адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.
CSSCenter-div { margin: 0 auto; max-width: 700px; }
Пример
У центрированного div-элемента должно быть установлено свойство max-width .
Центрируем DIV внутри элемента с помощью свойств внутреннего блокаВнутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.
CSSOuter-div { padding: 30px; } .inner-div { margin: 0 auto; max-width: 700px; }
HTMLПример
У внутреннего div должно быть установлено свойство max-width .
Центрируем два адаптивных div-элемента рядом друг с другомЗдесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.
CSSContainer { text-align: center; } .left-div { display: inline-block; max-width: 300px; vertical-align: top; } .right-div { display: inline-block; max-width: 150px; } screen and (max-width: 600px) { .left-div, .right-div { lef max-width: 100%; } }
HTMLПример
Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.
DIV-элемент, центрированный при помощи FlexboxЗдесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .
CSSContainer { display: flex; align-items: center; justify-content: center; height: 100vh; } .item { background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; }
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.
Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений . Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.
Сравним следующие подходы. Выравнивание с помощью:
- таблицы,
- отступов,
- line-height ,
- растягивания,
- отрицательного margin ,
- transform ,
- псевдоэлемента,
- flexbox .
Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .
Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.
Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны . Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .
Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .
Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.
Outer {
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
background-color: #ffc;
}
.inner {
display: inline-block;
width: 100px;
height: 100px;
background-color: #fcc;
}
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/
Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.
Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.
Выравнивание с помощью таблицы Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
http://jsfiddle.net/c1bgfffq/1/
Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.
Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.
.outer-wrapper {
display: table;
}
.outer {
display: table-cell;
}
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.
Outer {
height: 200px;
}
.inner {
height: 100px;
margin: 50px 0;
}
http://jsfiddle.net/c1bgfffq/6/
Минус решения - оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.
Выравнивание с помощью line-height Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .Outer {
height: 200px;
line-height: 200px;
}
.inner {
white-space: nowrap;
overflow: hidden;
}
http://jsfiddle.net/c1bgfffq/12/
Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .
Outer {
height: 200px;
line-height: 200px;
}
.inner {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/c1bgfffq/15/
Минус данного способа заключается в том, что должна быть известна высота внешнего блока.
Выравнивание с помощью "растягивания" Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.Для этого нужно:
http://jsfiddle.net/c1bgfffq/4/
Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .
Выравнивание с помощью отрицательного margin-top Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H inner / 2.
Outer {
position: relative;
}
.inner {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
http://jsfiddle.net/c1bgfffq/13/
Минус данного способа - должна быть известна высота внутреннего блока.
Выравнивание с помощью transform Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .Outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
http://jsfiddle.net/c1bgfffq/9/
Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .
Минус данного способа - он не может быть применен, если внутренний блок имеет абсолютное позиционирование.
Выравнивание с помощью Flexbox Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?
Outer {
display: flex;
width: 200px;
height: 200px;
}
.inner {
width: 100px;
margin: auto;
}
http://jsfiddle.net/c1bgfffq/14/
Минус данного способа − Flexbox поддерживается только современными браузерами.
Какой способ выбрать? Нужно исходить из постановки задачи:- Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
- Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
- Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
- Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .
Теги: Добавить метки
Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (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
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;
}
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;
}
Еще можно выравнивать контент по нужной стороне, оставляя центрирование по высоте. Для этого нужно использовать 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;
}
.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;
}
Могут возникнуть проблемы с кроссбраузерностью, возможно следует использовать способ с table-cell (описан ниже).
- Firefox/IE8: использование display: table выравнивает блок вертикально по верхней границе документа.
- IE9/10: использование display: table выравнивает блок по левому верхнему углу страницы.
- Mobile Safari: если ширина задана в процентах, страдает горизонтальное центрирование
Другие способы Описанный способ отлично работает в большинстве случаев, но есть и другие методы, которые могут быть применимы для решения специфических задач.Отрицательный 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
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
- В некоторых случаях при рендеринге размываются края блока и текст
<!-- 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;
}
Преимущества:
- Изменяемая высота
- Верстка не едет при большом количестве текста в блоке
- Кроссбраузерность
- Сложная структура
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
- Требует множество разнообразных префиксов для корректной работы в современных браузерах
- Возможные проблемы производительности
Очень часто в верстке требуется центрировать какой-нибудь элемент по горизонтали и/или вертикали. Поэтому решил сделать статью с различными способами центрирования, чтобы все находилось под рукой в одном месте.
Горизонтальное выравнивание 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 работает теперь не только для горизонтального выравнивания, но и для вертикального. Причем без известной ширины/высоты.
Ресурсы по теме Помощь проектуПри создании макета веб-страницы, вы, вероятно, сталкивались с ситуацией, когда вам нужно отцентрировать div по горизонтали и вертикали, используя CSS. Есть несколько способов с применением CSS и JQuery.
Но вначале основы:
Выравнивание по горизонтали средствами CSSClass-name{
margin:0 auto;
width:200px;
height:200px;
}
Для центрирования div только по горизонтали, необходимо указать ширину и автоматическое значение для левого и правого margins (это сокращенная форма написания CSS-свойств). Этот метод работает на блочных элементов (div, p, h1 и т. п.). Чтобы применить его для линейных элементов (например, гиперссылок и изображений), необходимо написать еще одно правило — display:block .
Выравнивание по горизонтали и вертикали средствами CSSОдновременное центрирование div по по горизонтали и вертикали чуть более хитрое. Вам нужно заранее знать размеры div .
Class-name{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
С помощью абсолютного позиционирования элементов, мы можем выдернуть его из потока и задать его позицию по отношению к окну браузера. Задав смещение div на 50% от левой и верхней части окна, мы центрируем левый верхний угол относительно страницы. Единственное, что нам осталось сделать, это сместить div влево и вверх на половину его ширины и высоты, задав отрицательные значения margin , чтобы он идеально располагался по центру.
Выравнивание по горизонтали и вертикали с помощью jQueryКак уже говорилось, вышеуказанный метод CSS работает только с div -ом фиксированного размера. На помощь приходит JQuery:
// объявление функции:
$(window).resize(function(){
$(".class-name").css({
position:"absolute",
left: ($(window).width() - $(".class-name").outerWidth())/2,
top: ($(window).height() - $(".class-name").outerHeight())/2
});
});
// вызов функции:
$(window).resize();
Функция вычисляет ширину окна в $(window).resize() всякий раз при каждом изменении размера окна пользователем. Мы используем outerWidth() и outerHeight() , потому что в отличие от обычной width() и height() , они добавляют padding и ширину border , возвращая размер. Наконец, мы адаптируем при изменении размеров окна и центрируем div при перезагрузке страницы.