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:

1
2
3
4
5
6
7
#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:

1
2
3
4
5
6
7
8
9
#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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>
votar

En esta entrada hay 12 comentarios. Añade el tuyo.
Gravatar
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 😉

Gravatar
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!!

Gravatar
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.

Gravatar
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?

Gravatar
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, …

Gravatar
Ricardo
03 Mar 09 a las 15:13:11

Muy bueno el segundo ejemplo lo vi mucho tiempo atras en http://crea-t.net/blog/archives/7
aqui lo complementaron… muy buen dato

Gravatar
Christopher
28 Ene 10 a las 21:09:06

Gracias, podré a utilizar mi cerebro xD

Gravatar
joseph
25 Abr 10 a las 18:36:35

pero mi div mide 700 x 600 y cuando coloco esa medida .. no se llega a centrar

Gravatar
Full Producto
15 Jun 10 a las 19:45:27

encontre lo que necesitaba, pero probare

Gravatar
rowilson
22 Ene 11 a las 01:21:37

que bien, y si esta dentro de otro div, ahi que colocarle position:relative, y funciona. Ahora falta agregarle un detector de resolución para que al cerrar la ventana mas pequeña q el objeto mismo, este quede alineado a la parte superior y asi no quede por fuera. alguna idea. gracias

Gravatar
JonathanAyala
05 Ene 12 a las 21:20:26

No es más fácil poner en los atributos de estilo de la div «margin-right:auto; margin-left:auto…»? o no funciona con todos los navegadores?

Gravatar
ismael
11 Oct 12 a las 17:01:28

…francamente me pregunto porque nos dejamos llevar por la emoción y no miramos bien como funciona en todos los navegadores. Por ej. el css para versiones viejas de explorer y mozilla (que por cierto la mayoría de la gente usa) lamentablemente no sirve siendo que tienen una barra de herramientas bastante consiberable y termina por no visualizarse completamente el sitio, pricipalmente la parte superior. Habra alguna solucion?



(*) Datos obligatorios

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies