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

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

Вот два элемента div:

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

line-height для одной строки

Когда родитель занимает одну строку текста и высота потомка известна, можно применить свойство line-height. Значение свойства должно быть равным высоте внешнего блока. Это работает только для одной строки, поэтому потомку полезно добавить overflow: hidden и запрет переноса строки white-space: nowrap.

Не получится воспользоваться процентной записью line-height=100%, потому что 100% в этом случае — высота шрифта.

Container {
height: 300px;
line-height: 300px;
}

Inner {
white-space: nowrap;
overflow: hidden;
}

Способ применим только при известной высоте внешнего блока.

Таблица с vertical-align

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

Baseline — по умолчанию;
. bottom — содержимое внизу ячейки;
. middle — содержимое посередине ячейки;
. top — содержимое вверху ячейки.

В первом примере внешним блоком становится одинокая ячейка таблицы.

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

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

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

Outer-wrapper {
display: table;
}

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

Position: absolute + отрицательный margin

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

Значение свойства top, равное 50%, заставляет вложенный элемент расположиться верхним краем посередине внешнего блока. Остается поднять его отрицательным margin-top на половину собственной высоты, чтобы он встал точно по центру вертикали.

Container {
position: relative;
}

Inner {
height: 140px;
position: absolute;
top: 50%;
margin-top: -70px;
}

Недостаток этого способа в необходимости знать высоту потомка.

Выравнивание в строке с vertical-align

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

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

Для внешнего блока прописывается центрирование одной строки.

Container {
height: 140px;
line-height: 140px;
}

Значение line-height для внутреннего блока переопределяется на normal или на любую требуемую величину. Ему же задается выравнивание vertical-align: middle и преобразование в строчно-блочный тип — display: inline-block.

Inner {
display: inline-block;
line-height: normal;
vertical-align: middle;
}

Недостаток способа — надо знать высоту родителя.

Выравнивание с помощью transform

Функция translateY свойства transform позволяет отцентрировать внутренний блок с неизвестной высотой. Для этого родитель должен быть спозиционирован относительно, а потомок — абсолютно.

Свойство top со значением 50% опускает внутренний блок так, что его верхний край располагается посередине родителя. Значение translateY: -50%, поднимает элемент на половину его собственной высоты и тем самым совмещает вертикальные центры блоков.

Container {
position: relative;
}

Inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

Недостаток приема в ограниченной поддержке функций transform браузером IE.

Выравнивание через псевдоэлемент

Способ работает, когда высота неизвестна ни для первого, ни для второго блока. Внутрь родителя с помощью before или after добавляется строчный псевдоэлемент inline-block. Высота добавленного элемента должна равняться высоте родителя — height: 100%. Вертикальное выравнивание содержимого задается посредством vertical-align: middle.

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

Container:before {
content: "";
height: 100%;
vertical-align: middle;
display: inline-block;
}

Inner {
display: inline-block;
vertical-align: middle;
}

Универсальный способ. Не работает если внутреннему блоку задано абсолютное позиционирование.

Flexbox

Самый новый и простой способ выравнивания элементов по вертикали. Flexbox позволяет расставлять элементы Web-страницы как угодно. Чтобы выровнять блок по центру, достаточно родителю прописать display: flex, а потомку margin: auto.

Container {
display: flex;
width: 320px;
height: 140px;
}

Inner {
width: 120px;
margin: auto;
}

Flexbox работает только в современных браузерах.

Выбор способа

Какой техникой вертикального выравнивания воспользоваться зависит от задачи и тех, ограничений, которые могут присутствовать в каком конкретном случае.

Высота элементов неизвестна

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

1. Таблица. Родителем становится ячейка таблицы, созданная в HTML или через display-table/display-cell. Этому элементу-родителю присваивается vertical-align: middle.

2. Псевдоэлемент. Для внешнего блока создается строчно-блочный псевдоэлемент с width=100% и vertical-align: middle. Потомку прописываются display: inline-block и vertical-align: middle. Способ не работает только когда внутреннему блоку задано абсолютное позиционирование.

3. Transform. Родитель получает position: relative. Потомку присваивается position: absolute, top: 50% и transform: translateY(-50%);

4. Flexbox. Внешнему блоку ставится display: flex, внутреннему — margin: auto.

Известна только высота потомка

Внешний блок позиционируется относительно; внутреннему элементу прописываются абсолютное позиционирование, top: 50% и margin-top, равный половине его высоты.

Одна строка в блоке с известной высотой

Внешнему блоку задается свойство line-height со значением, равным его высоте.

Высота внешнего блока известна, а внутреннего элемента - нет.

Родителю ставится line-height равный его высоте. У потомка значение line-height переопределяется на normal или на любую требуемую величину, и задаются ему display: inline-block и vertical-align: middle.

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

Простое центрирование DIV-элемента на странице

Этот метод будет отлично работать во всех браузерах.

CSS

Center-div { margin: 0 auto; width: 100px; }

Пример

Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .

Центрируем DIV внутри DIV-элемента старым способом

Этот метод div выравнивания по центру будет работать во всех браузерах.

CSS

Outer-div { padding: 30px; } .inner-div { margin: 0 auto; width: 100px; }

HTML

Пример

Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина (width ).

Центрируем DIV внутри DIV-элемента с помощью inline-block

В этом методе центрирования div внутри div необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8 .

CSS

Outer-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 . Пример будет работать во всех современных браузерах.

CSS

Outer-div { padding: 30px; } .inner-div { margin: auto; width: 100px; height: 100px; }

HTML

Пример

У внутреннего div-элемента должна быть указана ширина (width ) и высота (height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.

Центрируем DIV по нижней границе страницы

Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

CSS

Outer-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 . Метод будет работать во всех современных браузерах.

CSS

Center-div { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; }

Пример

У div-элемента должна быть установлена ширина (width ) и высота (height ).

Делаем адаптивное центрирование DIV-элемента на странице

Здесь для выравнивания div по центру средствами CSS мы делаем ширину div-элемента адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.

CSS

Center-div { margin: 0 auto; max-width: 700px; }

Пример

У центрированного div-элемента должно быть установлено свойство max-width .

Центрируем DIV внутри элемента с помощью свойств внутреннего блока

Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.

CSS

Outer-div { padding: 30px; } .inner-div { margin: 0 auto; max-width: 700px; }

HTML

Пример

У внутреннего div должно быть установлено свойство max-width .

Центрируем два адаптивных div-элемента рядом друг с другом

Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

CSS

Container { 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+ .

CSS

Container { display: flex; align-items: center; justify-content: center; height: 100vh; } .item { background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; }

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

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

Для начала поговорим о горизонтальном центрировании. Наиболее популярный прием, это когда блок центрируется установкой размеров правого и левого margin в "auto" . Допустим, мы хотим отцентрировать блок с id ="container" шириной 860px. В таком случае в CSS файле нужно написать:

#container {
background-color:#EEE;
width:860px;
margin:0px auto;
}

Однако I.E. старых версий(5.0 например) не выровняет этот блок по центру. Конечно, такие древние браузеры уже никто не использует(из 1800 моих дневных посетителей - только 1), однако на всякий случай, лучше сделать, чтобы и там работало:)

Для этого, родительскому элементу, т.е тому, внутри которого мы центрируем наш блок(обычно родительским элементом является тег BODY), нужно задать параметр text-align:center . В таком случае блок выровняется по центру, однако и все его содержимое, также выровняется по центру, а нам этого не нужно. Поэтому, внутри этого блока ставим выравнивание по умолчанию - text-align:left .

body {text-align:center}

#container {
background-color:#EEE;
width:860px;
margin:0px auto;
text-align:left;
}

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

2. Сместить его вправо на 50% ширины окна браузера

3. Используя отрицательный отступ, сместить его влево на расстояние, равное половине ширины блока.

Таким образом, блок окажется по центру. Для большей наглядности, посмотрите ролик ниже:

CSS код примера:

#container {
background-color:#559964;
position:absolute;
left:50%;
margin-left:-430px;
width:860px;
}

Следует отметить, что если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, то для этого другого блока нужно задать position:relative;

Предположим, наш блок #container, который нужно выровнять по центру, лежит внутри блока #wrap. Тогда код будет выглядеть следующим образом:

#wrap{position:relative}

#container {
background-color:#559964;
position:absolute;
left:50%;
margin-left:-430px;
width:860px;
}

Теперь давайте рассмотрим случай, когда нужно выровнять блок по центру страницы, т.е. применить одновременно горизонтальное и вертикальное центрирование. Здесь опять же применим позиционирование. Итак нам нужно:

1. Задать блоку абсолютное позиционирование

2. Сместить его вправо на 50% и вниз на 50% , тем самым поставив его верхний левый угол в центр окна браузера.

3. Используя отрицательный отступ, сместить его вверх на расстояние, равное половине высоты блока, и влево на расстояние, равное половине ширины блока.

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

Допустим высота нашего блока 600px , ну а ширина 860 px . Тогда CSS код будет выглядеть следующим образом:

#container {
background-color:#559964;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-430px;
height:600px;
width:860px;
}

Надеюсь сам принцип Вам понятен.

Оцените урок: 1 2 3 4 5

Комментарии:

Буду первым кто посмотрел урок!!!

Эх... Вторая =) Недавно встретилась с этой проблемой в IE, мучалась долго)) Спасибо =)

Спасибо, страница в закладках)))

Большое спасибо, Андрей, за новые уроки!

Просто спасибо,я думаю добавить тут не чего))

Спасибо за урок, буквально пару дней назад пытался таое сделать, немного помучился и временно отложил

А у меня проблема: сайт в Mozille Firefox не хочет выравниваться, прилип к левому краю и все, ничего из вышеперечисленного не помогает (то же и в Opera).

а почему это не работает? - "если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, о для этого другого блока нужно задать position:relative;"

Огромное спасибо!!просто ГИГАНТСКОЕ спасибо!Дай Бог Вам здоровья!

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

Андрей, добавьте пожалуйста поиск по сайту.

Добавить комментарий.

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

Горизонтальное выравнивание 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 блоков, наверняка вы сталкивались с ситуациями, где необходимо центрировать ваш div горизонтально и вертикально, с помощью чистого CSS. Например, при создании всплывающих окон с . Существует несколько способов реализовать центрирование, и в этой статье я расскажу о моих любимых и простых способах, с помощью CSS или jQuery.

Для начала, основы:

Горизонтальное центрирование на CSS

Это делается просто, мы используем margin для нашего div блока.

ClassName{ margin:0 auto; width:200px; height:200px; }

Для центрирования div блока только горизонтально, вам необходимо определить ширину блока (width), использовать свойство auto для отступов (margin) слева и справа . Этот метод будет работать для всех блочных элементов (div, p, h1, и так далее…). Для применения горизонтального центрирования для строковых элементов (ссылки, картинки…), вам необходимо применить параметр display: block;

Горизонтальное и вертикальное центрирование на CSS

Центрирование div блока по горизонтали и вертикали одновременно, немного замысловатее. Вам необходимо знать размеры div блока преждевременно.

ClassName{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; }

С помощью абсолютного позиционирования блока, мы можем отсоединить его от окружающих элементов и определить его позицию в отношении к размеру окна браузера. Перемещаем div блок на 50% слева и сверху окна. Теперь верхний левый угол блока находится в центре окна браузера. Остается установить div блок в центре страницы с помощью перемещения его на половину его ширины влево и половину его высоты вверх. Ура! Получилось превосходное центрирование блока на чистом css коде.

Горизонтальное и вертикальное центрирование на jQuery

Как упоминалось ранее – CSS метод центрирования работает только с фиксированными размерами. Если размеры не определены, на помощь придет jQuery метод:

$(window).resize(function(){ $(".className").css({ position:"absolute", left: ($(window).width() - $(".className").outerWidth())/2, top: ($(window).height() - $(".className").outerHeight())/2 }); }); // Для запуска функции при загрузке окна: $(window).resize();

Функционирование данного метода заключается в запуске функции resize(), с помощью строки $(window).resize() . Эта функция работает всегда, когда изменяется размер окна браузера. Мы используем outerWidth() и outerHeight() , потому что в противовес width() и height() , они включают отступы и толщину рамок в размер, который возвращается ими. Последняя строка, запускает процесс центрирования div блока при загрузке страницы.

Преимущество использования этого метода в том, что вы можете не знать, какой размер div блока. Главный недостаток – это работоспособность только при включенном JavaScript. Поэтому этот метод приемлем для многофункциональных интерфейсов, таких как Вконтакте, Facebook и т.д.

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