Просмотров: 38 031

Выравнивание блока div со свойством position:absolute или fixed по центру.

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

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

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

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

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

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

<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%.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».

  • http://www.artliniya.in.ua Виктор

    Супер, грамотные примеры, спс

  • ikenfin

    Это конечно познавательно, но вот как быть если длина блока в процентах?

    • admin

      Добавил вариант с процентами в статью, посмотрите.

      • http://twitter.com/iKenFin KenFin 277409917

        Спасибо, все работает! Как то сам не догадался до этого:(

  • Андрей

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

    • admin

      Андрей, Вам сюда:

      //webgyry.info/vertical-align-css

    • kenfin

      Можно попробовать padding выставить у родителя

  • Юрий

    можно выровнять такой блок по центру вместо
    left:50%; margin-left:-25%;

    пишем:

    left: 0; right: 0;
    а если надо еще и по вертикали выровнять, то пишем еще:
    top: 0; bottom: 0;

  • http://vk.com/id46311011 Денис Чигорин

    Спасибо огромное за статью! Очень помогла в загвоздке. Получилось отцентровать блок fixed. не зависимо от ширины экрана. И подмечу. Если делать left, то margin-right с положительным значением не сработает.

  • Мой хозяин

    Хорошо, а если ширина/высота блока резиновая?

  • Алексей

    Если резиновая — то медиазапросами с пересчетом width…либо js

  • Сергей

    Очень помогла статья!! Спасибо !!!

  • Александр

    Можно margin-left слева от экрана высчитать при загрузке страницы $(‘block’).css(‘width’, -(screen.width/2)) или вроде того, если блок нужен посреди страницы

  • Vlad

    Ну и где здесь про fixed?
    Что за обман,а не статья.