Медная поляна

Намедни во френдфидике, в группе «Учимся верстать» материализовался вопрос, как вертикально выровнять блок произвольной высоты по центру окна браузера без использования таблицы в разметке.

Решение не ново; возможно, вам пригодится.

HTML:

<div id="wrapper">
    <div id="middle">
        <p>Lorem ipsum...</p>
    </div>
</div>

CSS:

* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {display: table;}
#wrapper {display: table-cell; vertical-align: middle;}
#middle {color: white; background: gray;}

Посмотрите, все просто. Во всех современных браузерах конструкция работоспособна; IE 6,7 к названным не относятся.

4 комментария

Николай

> IE 6,7 к названным не относятся.

Чего и следовало ожидать

Костег

Какое ж оно бестабличное, если используется display: table-cell?

Вот посмотрите здесь ( http://css-html.org/17-vertical-align-in-divs/ ) проблема решена и для IE 6,7

@Green Тогда применительно к данному случаю при использовании expression необходимо определять высоту контейнера, т.е. #wrapper { height:100% ... }