1

Размещение блока (div) по центру страницы

Для того, чтобы разместить блок (div) по центру окна браузера нам понадобится несколько сток HTML и CSS кода приведенного ниже:

CSS код:

#block-on-center {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
margin-top: -100px; /* значение равно половине height со знаком минус */
margin-left: -100px; /* значение равно половине width со знаком минус */
border: 1px solid #000;
}

HTML-код:

<div id="block-on-center">
<!-- здесь содержимое блока -->
</div>

Размещаем вышеприведенный код в своем HTML документе не забывая про doctype, head, body, и другие элементы. Готово!

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8 Проверено, работает!
Firefox 3.5.4 Проверено, работает!
Opera 9.64 Проверено, работает!

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong
Оставьте своё мнение, и о нём узнают миллионы!

Уважаемые пользователи! Для того, чтобы комментировать записи Вы должны ввести своё имя, e-mail и решить простое уравнение. Это сделано для того, чтобы обезопасить блог от спама и спам-ботов.
При оставлении комментария, пожалуйста, воздержитесь от написания ссылок на сторонние ресурсы. Все комментарии фильтруются как плагинами так и вручную. Не тратьте своё и моё время.
Спасибо за понимание!

1 комментарий
  1. Yack 7 Янв, 2010

    Описанный выше способ лажает при ширине div, превышающей ширину окна. Правильно делать так:
    в свойствах div указать: margin: 0 auto;