Выравниваем блок DIV по центру экрана

Буквально на днях необходимо было написать небольшой шаблон для сайта. Но только задача ставилась, что шаблон должен был быть написан исключительно только DIV-ами, имел фиксированную ширину и высоту, и должен располагаться по центру экрана. Немного поразмыслив, накидал небольшой код в HTML+CSS который решил данную задачу. Если кому то понадобитсмя такое же решение, пожалуйста пользуйтесь. Оно может подойти как и для странички сайта, так например и для формы авторизации.
Ну в общем то а теперь и само рещение.
В начале напишем сам код в HTML:

<div id="container" align="center">

    <div class="main">
        <div class="main_in_main">
            <div class="content">Шаблон-заготовка. Страница с содержимым распологается по центру относительно экрана.
            Дальнейшие рекомендации: заточить напильником под свои нужды.
            </div>
        </div>
    </div>
</div>

А теперь добавим в него необходимые стили:

body {
    margin:0;
    padding:0;
    background: #edebd5;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
}
#container {
    width:400px; /*Ширина блока*/
    height:200px; /*Высота блока*/
    margin:0 auto;
    overflow:visible;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-200px; /*Смещаем блок на половину всей ширины влево*/
    margin-top:-100px; /*Смещаем блок на половину высоты вверх*/
    background:#ffffff;
}
.main {
    height:100%;
}
.main_in_main {
    height:100%;
}
.content {
    padding-top:0px;
    height:200px;
}

14.03.2010

Вернуться на предыдущую страницу | Вернуться в раздел