No al cierre de webs
TreeWeb::Artículos::HTML y CSS::Centrar un div en una página
Permalink: http://www.treeweb.es/u/467/ 10/11/2010

Centrar un div en una página

Descripción

El objetivo es centrar un div de tamaño fijo en una página en el eje vertical y horizontal. El centrado horizontal se consigue muy fácilmente mediante un margin:auto a los laterales. Sin embargo, el centrado vertical tiene dos inconvenientes: el primero es que el div no conoce el alto de la página y el segundo inconveniente es que aún sabiendo el alto, debemos desplazar el contenedor hacia arriba una cantidad fija en píxeles. Para solucionar el tema de las alturas, debemos poner una altura del 100% al componente más externo, el HTML, y volver a poner el 100% a los sucesivos componentes anidados hasta llegar al div que queremos centrar verticalmente, (en el caso del ejemplo basta con el BODY). Este formato viene muy bien para los típicos mensajes 'Sitio en mantenimiento' o 'Código rojo: Sobrecarga en el núcleo'.

Ejemplo

El ejemplo se puede ver en este enlace /TreeWeb/Articulos/HTML-y-CSS/Centrar-un-div-en-una-pagina/centrar_div_en_una_pagina.html.

Codigo

    0 
    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2 "http://www.w3.org/TR/html4/strict.dtd">
    3 <html>
    4     <head>
    5         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    6         <style type="text/css">
    7             HTML {
    8                 height:100%; /* Le permite al navegador calcular el alto total */
    9                 overflow:hidden; /* Evita que aparezcan barras de scroll al hacer
   10                                     la ventana muy pequeña */
   11             }
   12             
   13             BODY {
   14                 height:100%; /* Le permite al navegador calcular el alto total */
   15                 margin:0px; /* Elimina los márgenes */
   16             }
   17 
   18             .separador {
   19                 height:50%; /* ocupa el 50% de la pantalla */
   20                 background-color:silver;
   21             }
   22 
   23             .cuadrado {
   24                 height:100px; /* La altura del div debe ser fija */
   25                 margin:-50px auto; /* Desplazo 1/2 de la altura de la caja hacia
   26                                               arriba y centra horizontalmente */
   27                 width:400px;
   28                 border:solid red 1px;
   29                 text-align:center;
   30             }
   31         </style>
   32     </head>
   33     <body>
   34         <div class="separador"></div>
   35         <div class="cuadrado">El div queda centrado tanto vertical como
   36         horizontalmente.<br> Pruébalo cambiando el tamaño de la ventana.</div>
   37     </body>
   38 </html>
   39 

   40 

Referencias

Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados