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.