Полное руководство по центрированию DIV-элемента

Сегодняшняя статья направлена на то, чтобы показать, как при помощи нескольких 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 class="outer-div"><div class="inner-div"></div></div>

Пример

Внешний 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

<div class="outer-div"><div class="inner-div"></div></div>

Пример

Свойство 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 class="outer-div"><div class="inner-div"></div></div>

Пример

У внутреннего 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 class="outer-div"><div class="inner-div"></div></div>

Пример

У внутреннего 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 class="outer-div"><div class="inner-div"></div></div>

Пример

У внутреннего 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

<div class="container"><div class="left-div"></div><div class="right-div"></div></div>

Пример

Здесь у нас несколько элементов с примененным свойством 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; 
}

HTML

<div class="container"><div class="item"></div><div>

Пример

Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

Перевод статьи “THE COMPLETE GUIDE TO CENTERING A DIV” был подготовлен дружной командой проекта Сайтостроение от А до Я.