Centrar un DIV vertical y horizontalmente

Para los que usamos HTML a menudo y queremos hacer las cosas bien según marca la W3C, sabemos que no siempre las cosas son tan fáciles como pueden parecer, y algo tan simple como centrar una caja, recuadro o contenido en medio del navegador puede parecer fácil, sin embargo si se quiere hacer mediante un DIV no es tan sencillo como parece.

En muchas ocasiones he estado tentado de usar el viejo método de poner una tabla que ocupe 100% de alto y 100% de ancho y poner el contenido de la celda todo a «center» (align y valign), pero pese a que a veces cueste… hay que hacer las cosas bien y usar un DIV para poder centrarlo mediante un par de técnicas que he encontrado en un genial artículo de la web ProgramacionWeb.net, dónde se explica de forma muy fácil y sencilla como centrar contenido mediante un DIV y CSS.

A continuación os dejo una adaptación mía del artículo antes mencionado, dónde he extraído la parte puramente técnica para hacer lo que nos interesa, centrar un DIV.

Caso 1
Para centrar un objeto de manera que ocupe siempre la posición central del espacio disponible en el navegador del visitante, y si lo que tenemos es un objeto que ocupa un tamaño relativo (porcentaje) y por lo tanto queremos que se ensanche o alargue en función de su contenido, deberemos usar el siguiente código CSS:

#id_del_div {
    position: absolute;
    top: 20%;
    height: 60%;    // 60% + 20% superior + 20% derecha = 100%
    left: 20%;
    width: 60%;    // 60% + 20% + 20% = 100%
}

Caso 2
Si el objeto (div) que queremos centrar tiene un tamaño fijo o absoluto (ancho y alto), la cosa no es tan sencilla como en el anterior caso.

Para conseguir que un elemento ocupe la posición central de su contenedor su vértice superior izquierdo debería estar situado en la siguiente coordenada X,Y:

X – ( ancho contenedor / 2 ) – ( ancho objeto / 2 )
Y – ( alto contenedor / 2 ) – ( alto objeto / 2 )

La primera parte de cada coordenada ( ancho y alto contenedor / 2 ) es sencilla, solo debemos situar el objeto en el medio ( 50% ) de su contenedor.

Pero así el objeto no estará centrado, sino que el que estará en el centro será su vértice superior izquierdo, todavía nos falta restarle a esta posición la mitad del tamaño del objeto ( y no podemos hacer 50%-150px ).

Para esto, utilizaremos un margen negativo igual a la mitad del tamaño del objeto, lo que hará que el objeto se desplace hasta la posición deseada:

#id_del_div {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    margin-top: -100px;    // 200px/2
    width: 300px;
    margin-left: -150px;    // 300px/2
}

Así pues, y para terminar vamos a ver un ejemplo completo para centrar un div, dónde se le ha añadido un borde para que se identifique mejor y una barra de desplazamiento para que no cambie su tamaño:

    
    
    
    


            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado 
            Este es el DIV centrado