A veces surge la necesidad de centrar un div completamente en la pantalla.
- Tanto de forma horizontal.
- Como de forma vertical.
- Incluso sin conocer el ancho o el alto fijo.
Pues vamos a hacerlo.
HTML
<div id="wrapper"> <div id="contenedor"> <div id="contenido"> <p>Contenido de ancho y altura variable.</p> </div> </div> </div>
CSS
html,body{
height:100%;
}
*{
margin:0;
padding:0;
}
#wrapper{
height:100%;
width:100%;
display:table;
overflow:hidden;
}
#contenedor{
display:table-cell;
width:100%;
vertical-align:middle;
text-align:center;
}
#contenido{
display:inline-block;
background-color:#CCC;
margin:0 auto;
}
RESULTADO
Así es como se interpretará en el navegador.
Ver demo online.
Volver al curso de maquetación y diseño web.
