Сегодня урок на тему выравнивания блоков div с помощью технологии CSS по центру.

Здесь есть несколько моментов, которые не совсем просто воспринимаются. На одном из них мне бы хотелось сегодня остановиться.

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

Для этого используется стандартная CSS конструкция margin:auto.

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

Т.е. в данном случае наш пример принимает следующий вид.

Есть еще более современное решение этой проблемы - использование flexbox.

Подробнее здесь.

<div style="width:900px; height:200px; background:#096;
position:relative;">
<div style="margin:auto; width:300px; height:100px; background:#CC0;
position:absolute;"></div>
</div>

position:relative; - у родительского блока было добавлено, чтобы отсчет шел именно с него, а не с тэга <body>

position:absolute; - собственно говоря, само абсолютное позиционирование.

2016-04-08_06-20-14

После произведенной манипуляции margin:auto работать уже перестает.

Как быть? Как можно снова выровнять блок по центру?

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

<div style="width:900px; height:200px; background:#096;
position:relative;">
<div style="margin:auto; width:300px; height:100px; background:#CC0;
position:absolute; left:50%; margin-left:-150px; "></div></div>

left:50%;  - смещаем блок относительно родительского на 50% влево.

margin-left:-150px; - т.к. отсчет идет с левого верхнего края блока, то для полной ровности, половину блока нужно сместить влево, что мы и делаем отрицательным отступом.

2016-04-08_06-21-12

Если ширина блока задается в процентах, то решение может быть следующим:

<div style="width:900px; height:200px; background:#096;
position:relative;">
<div style="margin:auto; width:50%; height:100px; background:#CC0;
position:absolute; left:50%; margin-left:-25%; "></div>
</div>

Если по центру нужно выровнять строку с текстом:

<p style=" position:absolute; top:0; text-align:center; width:100%;">Строка текста</p>

Дело в том, что, когда блоку присваивается свойство с position:absolute. Ширина блока с значением width:auto по умолчанию, становиться равной содержимому. Поэтому свойство text-align не будет работать. Чтобы все начало работать, нужно принудительно увеличить ширину до 100%.

Все, что было сказано выше про position:absolute аналогично можно применить и к блокам, которые имеют position: fixed.

Есть еще более современное решение этой проблемы - использование flexbox.

Подробнее здесь.