Добавление заметок к ссылке наивистов (на сайт советов w3c):
display:table-cell не работает с height:100%. Итак, если вы хотите расположить вертикально элемент на странице, высота которого вам неизвестна, вам нужно поместить его в контейнер с display:table и height:100% и в другой контейнер с display:table-cell и vertical-align:middle.
Кроме того, если вы хотите центрировать его по горизонтали, вам нужно указать width:100% для тела, внешнего контейнера, и дать text-align:center для внутреннего контейнера. Содержимое должно иметь display:inline-block, а для сброса выравнивания text-align:left.
В конечном итоге это становится следующим:
<style>
#vcontainer {
display: table;
height: 100%;
width: 100%;
}
#hcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#content {
display: inline-block;
border: lightGray 1px solid;
background-color: lightBlue;
text-align: left;
}
</style>
<body>
<div id="vcontainer"><div id="hcontainer">
<div id="content">
Hoyjo!<br>
I have returned to my hometown!<br>
Lolololo lololo lololo lololo lololo!<br>
</div>
</div></div>
</body>
Я не могу гарантировать, что он будет работать в старых браузерах (IE6 / 7). Он будет работать на IE8 при условии, что он работает по стандартам IE8 (да, это вас смущает. Спасибо, MS!), И вы должны дать <html> и <body> height:100%.