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.
Hay muchas formas de conseguirlo, pero nosotros lo haremos jugando con las propiedades de display: table; y display: table-cell;
Te muestro el código HTML para la estructura y después el código CSS para las propiedades que debe tener.
HTML
<div id="wrapper">
<div id="contenedor">
<div id="contenido">
<p>Contenido de ancho y altura variable.</p>
</div>
</div>
</div>No es nada del otro mundo, simplemente hemos hecho una caja grande llamada wrapper y dentro hemos metido un contenedor.
Dentro del contenedor está el contenido.
Y bueno en el cajón de contenido puede haber lo que tú quieras.
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.