Centrar un DIV vertical y horizontalmente

Dic 11

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
        div {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 300px;
                height: 200px;
                margin-top: -100px;
                margin-left: -150px;
 
                overflow: auto;
                border: 1px solid red;
        }
        </style>
    </head>
    <body>
        <div>
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado
        </div>
    </body>
</html>

Tags: centrar, centro, contenido, content, css, div, horizontalmente, html, programar, tabla, verticalmente, xhtml

« Mario Kart en la vida real | Michael Sembello - Maniac »

En esta entrada hay 7 comentarios. Añade el tuyo.

jose87
11 Dic 08 a las 20:42:06

Me viene de lujo Luigix, ahora mismo en una de las asignaturas que doy estamos liados con cosas de estas

gruncho
12 Dic 08 a las 00:05:16

Lo fastidioso es cuando te pones a tocar con los dichosos floats entonces es cuando se te descoloca todo! me leeré todo esto con mas detenimiento para reorganizar mi mente! SAludos!!

Intruso
12 Dic 08 a las 20:05:32

Como me gustaría dominar todos estos temas, no sabeis la suerte que teneis, a ver si poco a poco me voy metiendo mas.

egun
13 Dic 08 a las 19:44:08

Pues sí funciona, muy bueno…
Pero la verdad cuánto de complicados somos los informáticos… No sería más fácil que se pudiese poner algo como: align: center; o position: center; o algo así por el estilo?

ozutto
19 Dic 08 a las 13:17:11

jaja, yo con este tipo de post me quedo siempre flipado me parecen otra dimension, …. como cada vez que tengo que hacer uncambio en el blog y me pongo a invertigar por todas partes, …