Просмотров: 7 335

Выравнивание блока div по вертикали и горизонтали по центру абсолютным позиционированием.

Если с выравниванием блоков div по горизонтали ситуация более менее ясная, то с выравниванием по вертикали, как правило, возникают трудности. Здесь не все так просто и добавлением лишь одного стиля CSS, блок по вертикали не выравняешь. Нужно использовать комбинацию стилей CSS.

Давайте сейчас ее и рассмотрим.

Сегодня я хочу рассказать об одном методе такого выравнивания, который я чаще всего использую на практике.

Итак, предположим, что у нас есть блок div с id #container, который является контейнером. По центру этого блока нужно расположить вложенный блок с id #inner:

<div id="container">
   <div id="inner">
        Содержимое
    </div>
</div>

Эти блоки имеют  ширину, высоту и цвет фона, которые задаются стилями CSS:

#container {   
    background:#6BB533;
    height:400px;
    width:400px;
}
#inner {
    background:#fcfcfc;
    height:100px;
    width:100px;   
}

В браузере это выглядит сейчас следующим образом:

20-10-2013 9-15-47

Задача в том, чтобы выровнять вложенный блок по центру блока контейнера.

Сделать это можно отредактировав стили CSS следующим образом:

#container {   
    background:#6BB533;
    height:400px;
    width:400px;
    position: relative;   
}
#inner {
    background:#fcfcfc;
    height:100px;
    width:100px;
    margin:auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;   
}

Стили, которые были добавлены, выделены красным цветом. Это и есть та минимальная комбинация стилей CSS, которая заставит блок выравняться по центру.

Теперь блок будет отображаться по вертикали и горизонтали и по центру

20-10-2013 9-29-16

Вот живой пример:

Если в качестве блока контейнера вы хотите использовать элемент body, то к стилям CSS нужно добавить следующее:

html, body { height:100%; }

Надеюсь эти стили помогут вам решить проблему с вертикальным выравниванием блоков div по центру. Успехов!

Вот несколько книг, которые помогут вам разобраться в верстке сайтов и CSS более подробно

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

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

  • Сергей

    Спасибо Дмитрий.Записал урок

  • http://facebook.com/profile.php?id=100009875896396 Александр Кривицкий

    Спасибо! Пригодилась инфа!)