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.

centrar-div-pantalla-completo

Ver demo online.

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

Curso de Desarrollo Web