Página web centrada vertical y horizontalmente
Alguna vez te has preguntado «¿Y si creo una página con un ancho y alto fijos a modo de presentación en el que tan sólo una capa sea flexible?»
Buscando por internet llegué a un hilo en el que trataban éste tema, y me he tomado la libertad de terminar un poco el código (para añadirle un ancho a la web y que se autocentre).
El código CSS:
html, body {
height: 100%;
width: 100%;margin: 0;
}
#caja {
display: table;
height: 100%;
width: 100%;
position: relative;
background:#000;
}
.centrado {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
padding: 0 10px;
height: 100%;
background:#FFF;
}
.texto {
position: relative;
top: 0;
display: block;
background-color: #f00;
color: #fff;
width:400px;
height: 300px;
margin-left:auto;
margin-right:auto;
}
Y el código HTML:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Centrado Vertical
Texto de la página aquí
Y el resultado sería algo como esto:
(Clic en la imagen para agrandar)