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

28.09.2010

Влад Мержевич

Выравнивание слоя строго по центру веб-страницы применяется обычно для размещения картинки, служащей точкой входа на сайт или информационного сообщения. Удобство подобного расположения слоя — его независимость от разрешения экрана монитора и окна браузера. В любом случае слой будет занимать положение по центру веб-страницы.

Вначале следует указать ширину и высоту слоя с помощью свойств width и height. Размеры можно задавать в пикселах, процентах или других единицах. Ширину, например, можно определить в процентах, а высоту в пикселах.

Следующий шаг — задаем абсолютное позиционирование слоя через position со значением absolute. Положение слоя следует задать как 50% по горизонтали и вертикали с помощью свойств left и top. Эти значения остаются неизменными, независимо от используемых единиц измерения.

Так как координаты слоя мы определяем от его левого верхнего угла, для точного выравнивания следует добавить свойства margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины слоя (для margin-left) и высоты (для margin-top).

Чтобы высота слоя не менялась из-за его контента, включено свойство overflow: auto, оно добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 1).

Пример 1. Размеры слоя в пикселах

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <title>Выравнивание по центру</title>
  <style>
   #centerLayer {
    position: absolute; /* Абсолютное позиционирование */
    width: 280px; /* Ширина слоя в пикселах */
    height: 180px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 50%; /* Положение слоя от верхнего края */
    margin-left: -150px; /* Отступ слева */
    margin-top: -100px;	/* Отступ сверху */
    background: #fc0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки вокруг */
    padding: 10px; /* Поля вокруг текста */
    overflow: auto; /* Добавление полосы прокрутки */ 
   }
  </style>
 </head>
 <body>
  <div id="centerLayer">
    Будем также считать, что сила даёт большую проекцию на оси, чем газообразный 
    центр сил, что обусловлено существованием циклического интеграла у второго 
    уравнения системы уравнений малых колебаний.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

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

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

Учтите, что ширина слоя складывается из значений свойств width, padding, margin и border, это следует принимать во внимание при указании значений margin-left. Аналогично обстоит дело и с margin-top.