Centrar un div en una página

MAQUETACIÓN, CSS, CENTRADO

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 http://www.treeweb.es/__archivo__/TreeWeb/TreeCode/centrar_div_en_una_pagina.html.

Codigo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            HTML {
                height:100%; /* Le permite al navegador calcular el alto total */
                overflow:hidden; /* Evita que aparezcan barras de scroll al hacer
                                    la ventana muy pequeña */
            }
            
            BODY {
                height:100%; /* Le permite al navegador calcular el alto total */
                margin:0px; /* Elimina los márgenes */
            }

            .separador {
                height:50%; /* ocupa el 50% de la pantalla */
                background-color:silver;
            }

            .cuadrado {
                height:100px; /* La altura del div debe ser fija */
                margin:-50px auto; /* Desplazo 1/2 de la altura de la caja hacia
                                              arriba y centra horizontalmente */
                width:400px;
                border:solid red 1px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="separador"></div>
        <div class="cuadrado">El div queda centrado tanto vertical como
        horizontalmente.<br> Pruébalo cambiando el tamaño de la ventana.</div>
    </body>
</html>

Copia el código y pégalo en

Referencias

Centrar imagen de fondo en una página - http://www.treeweb.es/centrar-imagen-de-fondo-en-una-pagina

Comentarios