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

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-трюков выровнять 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; }

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

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%; }

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

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

При создании макета веб-страницы, вы, вероятно, сталкивались с ситуацией, когда вам нужно отцентрировать div по горизонтали и вертикали, используя CSS. Есть несколько способов с применением CSS и JQuery.

Но вначале основы:

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

Class-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 при перезагрузке страницы.

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

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

1. Выравнивание с помощью таблицы

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

HTML

CSS

Outer { width : 200px ; height : 200px ; text-align : center ; vertical-align : middle ; background-color : #ffc ; }

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

Первый минус можно частично невилировать, заменив теги таблицы на div и задав табличный режим отображения в CSS.

HTML

CSS

Outer-wrapper { display : table ; } .outer { display : table-cell ; }

2. Выравнивание с помощью отступов

При условии, если нам известны высоты внутреннего и внешнего блоков, выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H outer – H inner) / 2.

CSS

Outer { height : 200px ; } .inner { height : 100px ; margin : 50px 0 ; }

Минусом решения есть обязательное знание высоты обоих блоков.

3. Выравнивание с помощью line-height

Если внутренний блок занимает не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переходить на вторую строку, желательно также добавить правила white-space: nowrap и overflow: hidden .

CSS

Outer { height : 200px ; line-height : 200px ; } .inner { white-space : nowrap ; overflow : hidden ; }

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

CSS

Outer { height : 200px ; line-height : 200px ; } .inner { line-height : normal ; display : inline-block ; vertical-align : middle ; }

Минус способа - должна быть известна высота внешнего блока.

4. Выравнивание с помощью “растягивания”

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

Чтобы применить данный метод нам необходимо:

• Внешнему блоку завдать относительное позиционирование position: relative , а внутреннему − абсолютное position: absolute ;
• Внутреннему блоку добавить несколько правил top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
• Для вертикальных отступов внутреннего блока установить значение auto .

CSS

Outer { position : relative ; } .inner { height : 100px ; position : absolute ; top : 0 ; bottom : 0 ; margin : auto 0 ; }

5. Выравнивание с помощью отрицательного margin-top

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

Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. После чего сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -H_inner / 2 .

CSS

Outer { position : relative ; } .inner { height : 100px ; position : absolute ; top : 50% ; margin-top : -50px ; }

Минус данного способа - должна быть известна высота внутреннего блока.

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

Способ может применятся когда высота внутреннего блока неизвестна. Необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% , после чего воспользоваться свойством transform и поднять его обратно вверх с помощью функции translateY(-50%) .

CSS

Outer { position : relative ; } .inner { position : absolute ; top : 50% ; transform : translateY (-50% ); }

7. Выравнивание с помощью псевдоэлемента

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

Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. Таким образом, высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.

Чтобы не нарушать семантику, строчный блок желательно добавлять с помощью псевдоэлементов before или after .

CSS

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

Минус данного способа - невозможно примнять при абсолютном позиционировании внутреннего блока.

8. Выравнивание с помощью Flexbox

Самым современным способом вертикального выравнивания является применение Flexible Box Layout (или сокращенно Flexbox ). Он позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.