Блог → Как выровнять DIV по центру страницы на чистом CSS?

Как сделать так, чтобы DIV размещался строго по центру страницы, без абсолютного поцизионирования и применения JavaScript? Очень типичный вопрос для тех, кто занимается HTML вёрсткой. Ответ на него очень прост, а код занимает буквально пару строчек. Способ универсален и во всех современных браузерах страница будет выглядеть одинаково. Правда, есть один тонкий момент, на котором частенько "затыкаются" новички, но об этом ниже. Итак, по пунктам.

До сих пор в Интернетах можно встретить способы, которые рекомендуют делать отступы в процентах, но я рекомендую о них забыть, и не пользоваться. На сегодня наиболее простым и элегантным свособом является другой - с заданием автоматического отступа (auto) для границ (margin). Если конкретнее, то выглядеть эта стилевая конструкция будет так: "margin: 0px auto". И на примере. Так выглядит код HTML (test.html):

<html>
<head>
<title>Размещаем DIV по центру</title>
<link rel="stylesheet" type="text/css" href="test.css" media="all">
</head>
<body>
<div id="wrap">
</div>
</body>
</html>


А вот так CSS (style.css):

#wrap {
margin: 0px auto;
width: 500px;
background-color: Brown;
}


Проверяем! Всё отлично работает в Chrome, Opera и Firefox. В доказательство привожу скриншот, сделанный из окошка Хрома.



И вот тут кроется маленький нюанс, на котором частенько спотыкаются не только начинающие верстальщики, но и вполне опытные. Не по причине незнания вопроса, а банально - отвлеклись, не уследили, голова другим занята и пр. Открываем страничку в Internet Explorer'е и видим совсем другую картину.



Почему так?! Я, было дело, однажды просидел минут 20, разбираясь в CSS, пока не догадался, в чём тут "затык". Как зачастую бывает - в мелочи. Не забываем указывать DOCTYPE! Ведь если большинство остальныз браузеров додумывает его "на лету", то Эксплорер (в моём случае IE9) оказался предельно строг к забывчивости верстальщика. Указываем DOCTYPE для примера выше, и - вуаля, всё работает как нужно и в IE! Вот окончательная версия HTML кода (test.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Размещаем DIV по центру</title>
<link rel="stylesheet" type="text/css" href="test.css" media="all">
</head>
<body>
<div id="wrap">
</div>
</body>
</html>