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

Por luigix

12 comentarios en «Centrar un DIV vertical y horizontalmente»
  1. 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!!

  2. 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?

  3. 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, …

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

  5. 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?

  6. …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?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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