Как выровнять блок по центру - полное руководство по центрированию DIV-элемента
Сегодняшняя статья направлена на то, чтобы показать, как при помощи нескольких CSS-трюков выровнять div по центру, как по горизонтали, так и по вертикали. Также мы расскажем, как произвести центрирование по всей странице либо в отдельно взятом div-элементе.
- Простое центрирование DIV-элемента на странице
- Центрируем DIV внутри DIV-элемента старым способом
- Центрируем DIV внутри DIV-элемента с помощью inline-block
- Центрируем DIV внутри DIV-элемента горизонтально и вертикально
- Центрируем DIV по нижней границе страницы
- Центрируем DIV на странице вертикально и горизонтально
- Делаем адаптивное центрирование DIV-элемента на странице
- Центрируем DIV внутри элемента с помощью свойств внутреннего блока
- Центрируем два адаптивных div-элемента рядом друг с другом
- DIV-элемент, центрированный при помощи Flexbox
Простое центрирование 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-элемента.