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
Me viene de lujo Luigix, ahora mismo en una de las asignaturas que doy estamos liados con cosas de estas 😉
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!!
Como me gustaría dominar todos estos temas, no sabeis la suerte que teneis, a ver si poco a poco me voy metiendo mas.
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?
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, …
Muy bueno el segundo ejemplo lo vi mucho tiempo atras en http://crea-t.net/blog/archives/7
aqui lo complementaron… muy buen dato
Gracias, podré a utilizar mi cerebro xD
pero mi div mide 700 x 600 y cuando coloco esa medida .. no se llega a centrar
encontre lo que necesitaba, pero probare
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
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?
…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?