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?
