Как разместить сайт в центре окна браузера

 

Когда я создавал сайт borisov-quality.com, я задумывал сделать его так, чтобы он всегда находился в центре окна браузера. Причём решение, которое я применил впоследствии, должно было быть кроссбраузерным.

Если с горизонтальным выравнивание всё понятно, то с вертикальным нужно разобраться.
 

Вертикальное выравнивание блока с помощю CSS

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

Зададим стили:

    html, body {
        margin:0;                   /*убирает внешние отступы*/
        padding:0;                  /*убирает внутренние отступы*/
        width:100%;                 /*растягивает по ширине*/
        height:100%;                /*растягивает по высоте*/
    }
    html { height:100%; }
    body {
        display: table;             /*определяет, что элемент является блочной таблицей, подобно использованию тега <table>*/
        width: 100%;                /*устанавливает ширину на всё окно браузера*/
        height: 100%;               /*устанавливает высоту на всё окно браузера*/
        background-color: #eee;     /*задаёт цвет фона*/
        text-align: center;         /*выравнивает текстовое содержимое <body> по центру по горизонтали*/
        font-family: 'Times New Roman', Times, serif; /*задаёт шрифт для всего сайта*/
    }
    #wrapper {
        display: table-cell;        /*указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>)*/
        vertical-align: middle;     /*выравнивает содержимое по центру по вертикали*/
    }
    #centered {
        width: 100%;                /*задаёт ширину */
        margin: 0 auto;             /*выравнивает по центру по горизонтали относительно блока #wrapper; этот стиль можно не использовать!*/
    }
    div#centered {
        margin-top: expression(((document.documentElement.offsetHeight/2)
        -parseInt(offsetHeight)/2)  <0 ? "0" :
        (document.documentElement.offsetHeight/2)
        -(parseInt(offsetHeight)/2)  +'px') ;
    }                               /*устанавливает вертикальное выравнивание для IE7*/
    #centeredBlock {
        position: relative;         /*относительное позиционирование*/
        width: 500px;               /*устанавливает ширину*/
        height: 500px;              /*устанавливает высоту*/
        margin: 0 auto;             /*выравнивает по центру по горизонтали относительно блока #centered*/
        border: 4px dashed grey;    /*задаёт границу блока (ширина, стиль, цвет)*/
    }
    .pos_absolute {
        position: absolute;         /*абсолютное позиционирование*/
        padding: 5px;               /*устанавливает внутренний отступ*/
    }
    .pos_fixed {
        position: fixed;            /*фиксированное позиционирование*/
        bottom: 50px;               /*отступ снизу*/
        right: 50px;                /*отступ справа*/
        padding: 5px;
        border: 3px double yellow;  /*задаёт границу блока (ширина, стиль, цвет)*/
    }
    .colored {
        background-color: #fff;     /*фон блока*/
    }
    .elem_1 {
        top: 250px;                 /*отступ сверху от родительского блока #centeredBlock*/
        left: 175px;                /*отступ слева от родительского блока #centeredBlock*/
        border: 3px double green;
    }
    .elem_2 {
        top: 150px;
        left: 105px;
        border: 3px double red;
    }
    .elem_3 {
        top: 375px;
        left: 315px;
        width: 280px;               /*устанавливает ширину*/
        border: 3px double blue;
    }
    .block {
        width: 280px;               /*устанавливает ширину*/
        height: 30px;
        top: 50px;
        left: -290px;
        font-weight: bold;          /*устанавливает насыщенность шрифта; в данном случае - жирный*/
        color: violet;              /*устанавливает цвет текста*/
    }

В комментариях к коду, я думаю, всё понятно. Основные стили, которые определяют, что блок должен быть вертикально выровнен, следуюущие. Задание высоты 100% для <html> и <body>. Далее устанавливается, что элемент является блочной таблицей. И в блоке с идентификатором #wrapper указывается, что элемент представляет собой ячейку таблицы (тег <td> или <th>). Самое последнее — в блоке #wrapper устанавливается блок #centered, который и выравнивается вертикально. Также сделан хак для IE7.

А горизонтальное выравнивание выполнено при помощи margin: 0 auto; у блока #centeredBlock.

Теперь сама разметка:

    <div id="wrapper">
        <div id="centered">
            <div id="centeredBlock">
                <div class="pos_absolute elem_1 colored">
                    Абсолютно позиционированный блок 1
                </div>
                <div class="pos_absolute elem_2 colored">
                    Абсолютно позиционированный блок 2
                </div>
                <div class="pos_absolute elem_3 colored">
                    Абсолютно позиционированный блок 3
                </div>
                <div class="pos_absolute block">
                    Граница центрированного блока -----><br>#centeredBlock
                </div>
                <div class="pos_fixed colored">
                    Фиксированный блок
                </div>
            </div>
        </div>
    </div>

Блок с идентификатором #centeredBlock здесь приведён для наглядного примера того, как выровнен блок по центру окна браузера.

 

Позиционирование элементов сайта

Чтобы установить позиционирование блока, в CSS существует свойство position.

Оно принимает значения: absolute | fixed | relative | static | inherit

  • absolute — указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет
  • fixed — по своему действию это значение близко к absolute, но, в отличие от него, привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы
  • relative — положение элемента устанавливается относительно его исходного места
  • static — элементы отображаются как обычно
  • inherit - наследует значение родителя

Чтобы установить позицию, нужно задать значения: top, left, bottom и right.

В примере выше есть позиционированные элементы: 3 блока абсолютно позиционированы, 1 блок относительно позиционирован (centeredBlock) и 1 блок имеет фиксированную позицию.

 

 

 

На этом я заканчиваю пост о том, как разместить содержимое сайта в центре окна браузера по горизонтали и вертикали. А также как позиционировать элементы сайта.

До скорых встреч.

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звёзд   (голосов: 4, средняя оценка: 5,00 из 5, сумма: 20)

Loading...

Понравилось? Поделитесь с друзьями:





Другие материалы по теме:

Борисов - Качество
HTML и CSS - бесплатные видеокурсы
«HTML» и «CSS»
Изучите Видеокурсы
Бесплатно!
Станьте хозяином своих сайтов прямо сейчас! Введите Ваше Имя и Ваш E-Mail:

Ваш E-Mail в безопасности