Salamarkesa

CENTRAR DIV EN PANTALLA COMPLETAMENTE | ANCHO Y ALTO VARIABLE

A veces surge la necesidad de centrar un div completamente en la pantalla.

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.

centrar-div-pantalla-completo

Ver demo online.

Volver al curso de maquetación y diseño web.