Por fin he conseguido centrar tanto horizontal como verticalmente un div dentro de otro.
Ademas con proporciones dinamicas (si reduces la ventana del navegador se autoajustan el ancho y el alto de las mismas.)
Así lo he hecho y esta probado en Chrome, IE8 y Firefox 3:
HTML:
Código HTML:
<body>
<div id="css_tablaContenedorBorde">
<div id="css_filaContenedorBorde">
<div id="css_celdaContenedorBorde">
<div id="css_tablaContenedor">
<div id="css_filaContenedor">
<div id="css_celdaContenedor">
hola mundo
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
Código:
body
{
padding: 0;
margin: 0;
background: #fff;
width: 100%;
text-align: center;
}
html, body{height: 100%;}
/*ESTILOS EMULANDO TABLAS*/
div#css_tablaContenedor
{
display: table;
height:50%;
width:50%;
background-color: #fff;
vertical-align: middle;
text-align: center;
margin: 0 auto;
}
div#css_filaContenedor
{
display: table-row;
}
div#css_celdaContenedor
{
display: table-cell;
vertical-align: middle;
width: 50%;
}
div#css_tablaContenedorBorde
{
display: table;
height:100%;
width:100%;
background-color: #ff00ff;
vertical-align: middle;
text-align: center;
margin: 0 auto;
}
div#css_filaContenedorBorde
{
display: table-row;
}
div#css_celdaContenedorBorde
{
display: table-cell;
vertical-align: middle;
width: 50%;
height:100%;
}
¿Que opinais?