Supongamos que tenemos un párrafo (elemento P) dentro de una capa (elemento DIV) y quueremos una alineación vertical centrada para el párrafo dentro de esa capa.
Existe una solución con CSS: display:table;. Pero tiene el problema habitual de CSS: el excelente soporte de CSS en Internet Explorer, que, para variar, no es compatible con display:table;.
Pero utilizando algunos hacks CSS y metiendo una capa adicional se puede dar solución al centrado vertical, manteniendo compatibilidad con la mayor parte de los navegadores.
Este sería el HTML:
<div class="t1">
<div class="t2">
<p>Párrafo a centrar</p>
</div>
</div>Y este el CSS:
div.t1 {
height:12em; /*Altura de la capa*/
overflow:hidden;
position:relative;
}
html>/**/body div.t1 {
display:table;
position:static;
}
div.t2 {
position:absolute;
top:50%;
}
html>/**/body div.t2 {
display:table-cell;
position:static;
vertical-align:middle;
}
p {
position:relative;
top:-50%;
}