Выравнивание div по центру на CSS (HTML)

Подробности

Категория: Для сайта

Опубликовано 01.09.2014 18:56

Нередко могут пригодиться способы выравнивания элементов строго по центру. Это может пригодиться в построении пользовательского интерфейса на HTML+CSS, а также при строении адаптивного интерфейса.

Есть много путей добиться этого эффекта и мы постараемся осветить большинство их них.

Неизвестна длина и ширина

Если вы не знаете какой длинны ваш объект который вы собираетесь отцентрировать или у него динамически меняющиеся размеры тогда нам нужно делать так:

<table style="width: 98%;height: 99%;position: absolute;">
<tbody><tr>
<td style="text-align: center; vertical-align: middle;">
Отцентрированный текст<br>Один... Два... Три...
</td>
</tr>
</tbody></table>

Если вы волнуетесь по поводу эстетичности семантики (таблицу-таки не по назначению используем), тогда это же можно представить слоями:

<div class="parent-div">
<div class="child-div">
Отцентрированный текст<br>Один... Два... Три...
</div>
</div>
<style>
.parent-div {
display: table;
width: 100%;
}
.child-div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>

Есть ещё очень изящный способ отцентрировать слой с содержимым неизвестного размера. Вот работающий пример. Здесь используется призрачный слой, который растягивает родительский блок на 100% своей заданной высоты и благодаря этому удаётся центрировать строго по центру необходимый слой с данными.

Теперь если вам нужно отцентрировать div только по горизонтали, тогда можно использовать:

display: table;

Едем дальше.

.mydiv {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

Здесь может изменяться высота дива, но не ширина.

Следующий вариант сделать центрирование будет весьма громоздок:

<div class="Pos-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
Здесь ваш контент
</div>
</div>
</div>
<style>
.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;
}
</style>

Также позволяет изменять высоту div'a, но к сожалению имеет 3-уровневое дерево DOM, а это нехорошо.

Если вы знаете ширину и высоту div'a и она изменяться не будет, тогда целесообразно использовать такой подход:

.mydiv {
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; left: 50%;
margin-left: -170px; /* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */
}

Также, если вам известна высота и ширина, вы можете использовать такой подход:

.mydiv{
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}

Если вы не укажите высоту или ширину, тогда вместо отсутствующего значения браузер автоматически сделает 100%.

Если вы хотите сделать модальное окно с процентной шириной, то подойдёт такой CSS код:

.mydiv {
height: 50%;
width: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
height: auto;
}

Это основные спообы выравнивания по центру. Ещё несколько способов можно посмотреть здесь.

Если есть что написать по теме - добро пожаловать в комментарии!