Página web centrada vertical y horizontalmente

0

Alguna vez te has preguntado "¿Y si creo una página con un ancho y alto fijos a modo de presentación en el que tan sólo una capa sea flexible?"

Buscando por internet llegué a un hilo en el que trataban éste tema, y me he tomado la libertad de terminar un poco el código (para añadirle un ancho a la web y que se autocentre).

El código CSS:

PLAIN TEXT
CSS:
  1. html, body {
  2.         height: 100%;
  3.         width: 100%;margin: 0;
  4.     }
  5.     #caja {
  6.         display: table;
  7.         height: 100%;
  8.         width: 100%;
  9.         position: relative;
  10.         background:#000;
  11.     }
  12.     .centrado {
  13.         display: table-cell;
  14.         vertical-align: middle;
  15.         margin: 0 auto;
  16.         padding: 0 10px;
  17.         height: 100%;
  18.         background:#FFF;
  19.     }
  20.     .texto {
  21.         position: relative;
  22.         top: 0;
  23.         display: block;
  24.         background-color: #f00;
  25.         color: #fff;
  26.         width:400px;
  27.         height: 300px;
  28.         margin-left:auto;
  29.         margin-right:auto;
  30.     }

Y el código HTML:

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5. <title>Centrado Vertical</title>
  6. </head>
  8.     <div id="caja">
  9.         <div class="centrado">
  10.             <p class="texto">Texto de la página aquí</p>
  11.         </div>
  12.     </div>
  13. </body>
  14. </html>

Y el resultado sería algo como esto:

web centrada verticalmente

(Clic en la imagen para agrandar)

Entradas relacionadas

Deja un comentario

Volver arriba