CSS: простой способ выровнять блок по центру экрана

Известно, что выровнить блок заданной ширины по центру по горизонтали можно с помощью свойства margin:0 auto. Но как поступить, если его еще надо выровнить по центру по вертикали.

На самом деле всё просто. Чтобы разместить по центру блок с заданной шириной и высотой, надо его абсолютно спозиционировать с left:50% и top:50% относительно экрана и отрицательным маргином сместить его назад на половину размера ширины и высоты дива.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Выравнивание блока по центру по вертикали и горизонтали</title>
    <style type="text/css">
    html, body{
        margin:0;
        padding:0;
        width:100%;
        height:100%;
    }
    #CenterBlock{
        background:#F00;
        width:400px;
        height:400px;
        position:absolute;
        top:50%;
        left:50%;
        margin:-200px 0 0 -200px;
    }
    </style>
</head>

<body>
    <div id="CenterBlock">
        Я отцентрированный блок
    </div>
</body>
</html>

Как видите, сначала мы задали html и body 100% высоту, чтобы они растянулись на весь экран, потом спозиционировали слой с left и top по 50% и отрицательным маргином сместили его назад на половинчатые размеры.

Источник: html-css.info

Запись опубликована в рубрике CSS, HTML с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*