Слой по центру веб-страницы

В этой статье мы создадим слой, который будет находиться по центру веб-страницы. Если страница будет прокручиваться, слой все равно будет находиться на том же самом месте.

Сначала наш html код

<!DOCTYPE html>
<html><head>
<title>Слой по центру веб-страницы</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Слой по центру веб-страницы</h1>
<br>
<div id="fixed">Фиксированный блок, расположенный по центру</div>
</body>
</html>

Добавим оформление

#fixed{
/* ширина слоя */
width:350px;
/* высота слоя */
height:150px;
border:2px solid gray;
background:silver;
box-shadow:0 0 10pt #727272;
padding:10pt;
border-radius:4pt;
/* положение слоя */
left:50%;
top:50%;
/* координаты слоя определяются от его левого верхнего угла,
* для точного выравнивания следует добавить свойства margin-left и
* margin-top с отрицательными значениями
* margin-left - ширина слоя, деленная на пополам
* margin-top - высота слоя, деленная на пополам
*/
margin-left:-175px;
margin-top:-75px;
position:fixed;}

/* для "любимого" IE */
*html #fixed{
position: absolute;
top: expression(document.getElementsByTagName( 'body' )[0].scrollTop + 250 + "px");}

Свойство position:fixed позволяет слою находиться на одном месте. Если Вам это не нужно, position:fixed можно заменить на position:absolute и убрать условие для IE

Демонстрация