«Вертикальное центрирование возможно только в том случае, если элемент расположен абсолютно и имеет известную высоту». - Это утверждение не совсем верно.
Вы можете попытаться использовать display:inline-block;
и возможность его выравнивания по вертикали в рамке родительского элемента. Этот метод позволяет выровнять элемент, не зная его высоты и ширины, хотя он требует, чтобы вы знали, по крайней мере, высоту родителя.
Если ваш HTML это;
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
А ваш CSS это:
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
}
Тогда # выровненный по центру будет центрирован внутри #container. Это простейшее использование этой техники, но с ней приятно ознакомиться.
Правила, помеченные "/ * для IE <8 * /", должны быть помещены в отдельную таблицу стилей с помощью условных комментариев. </p>
Рабочий пример этого можно посмотреть здесь: http://jsfiddle.net/UXKcA/3/
edit: (этот конкретный фрагмент тестировался в ie6 и ff3.6, но я часто его использую, это довольно кросс-браузер. Если вам нужна поддержка ff <3, вам также нужно добавить <code>display:-moz-inline-stack; в display:inline-block;
в пределах .inline-block
правила.)