Пятница, 28 мая 2010 08:13

Размещаем блок по центру окна браузера.

Оцените материал

(1 Голосовать)

В этой небольшой статье мне хотелось бы рассказать об одном простейшем способе размещения блока по центру окна браузера. В каких случаях может пригодиться данный метод?

Например, когда сайт закрыт для посетителей и нужно показать страничку с «заглушкой» или создать свою страничку, которую увидят посетители в случае ошибки 404 — объявление об отсутствии запрашиваемой страницы можно разместить в блоке в центре окна браузера.

центрирование блок в окне браузера

Ниже приведен код html и css.

html

<body>
  <div id="uc_block">&lt/div&gt
</body>

css

div#uc_block{
  width:808px;
  height:538px;
  background:url(under_construction.jpg) no-repeat top left;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-404px;
  margin-top:-269px;
 }

Эффект достигается следующими действиями:

создаем сам блок фиксированной ширины с фоном;
позиционируем его абсолютно;
делаем у блока отрицательные левый и верхний отступы равные половине величины блока

Минусом этого способа является то, что блок должен быть фиксированного размера.

Прочитано 7262 раз

Опубликовано в HTML-верстка

Теги

Другие материалы в этой категории: « Размещаем полупрозрачный .png в IE6. Верстка psd макета — находим подходящий размер шрифта. »

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх