Para centrar un div horizontalmente y verticalmente normalmente se usa css para ello. Pero a veces es imposible hacerlo mediante css, porque cada usuario tiene una resolucion en su pantalla diferente, al mismo tiempo que empleamos menos tiempo en centrarlo mediante jquery y javascript, ya que no tenemos que estar calculando anchos y altos.
He encontrado una función muy sencilla a la que le pasamos la clase o el id del div y lo centrará automáticamente en la pantalla.
Con la función $(window).width() y $(window).height() obtenemos el ancho y altura de la ventana abierta.
Con la función outerWidth() y outerHeight() obtenemos el ancho y altura del div.
$(document).ready(function(){
$(window).resize(function(){
$('#contenedor_caja').css({
position:'absolute',
left: ($(window).width() - $('#contenedor_caja').outerWidth())/2,
top: ($(window).height() - $('#contenedor_caja').outerHeight())/2
});
});
// Ejecutamos la función
$(window).resize();
});
<div id="contenedor_caja"> <p>Contenido del div</p> </div>
Hola,
me funciona con IE, pero no en Firefox ni en Chrome
Saludos
Que raro, suele ser al revés! xD
A ver el artículo es un poco viejo y puede que el código esté obsoleto.
Échale un ojo a estos resultados: http://stackoverflow.com/search?q=centering+div+jquery
Si encuentras otra solución no dudes en comentarlo 😉
Hola,
gracias por la respuesta. Yo pense exactamente lo mismo, funciona con IE y no con los demas?? No me lo puedo creer!!
Volveré a probar y a mirar el link que me has dado.
Muchas gracias por todo.
Àlex
Disculpa, ya funcionó, tenía mal el nombre de mi DIV, disculpa 🙁
Hola Pedro, tal vez el post es muy viejo pero no puedo hecharlo andar, ahí pones que solo se echa a andar, pero como es que se hace eso? lo siento soy muy inexperto
Hola Roman,
Debes cargar un código javascript adicional que es la librería de JQuery. Incluye la siguiente linea al incio del código y me cuentas.
Gracias Pedro me sirvió mucho! Sí funciona!
Gracias, justo lo que andaba buscando para un proyecto! 😉
Es mas facil que usar css.
antes del “?” iba div id=”contenedor_caja”
Hola! muy bueno el script, pero no me llega a funcionar del todo, puedo poner el div de la imagen que quiero que se autocentre, adentro del ? por que me parece que es eso lo que esta haciendo que falle :s
Tu tienes que poner todo lo que quieres centrar dentro del div con id contenedor_caja (o como lo quieras llamar) Una vez que se termine de cargar la página se ejecuta la funcion y se centra todo lo que esté dentro de ese div.. te salio??
porqué no lo haces con margin: 0 auto 0 auto; ???
Le das un tamaño a la capa y luego le aplicas esta regla. No necesitas ni javascript ni jquery… da igual la pantalla que tengas… se centrará correctamente.
Porque a veces es mucho mas complejo de lo que piensas…. yo he tenido que centrar un div que esta flotando, superpuesto a cualquier elemento es decir z-index mayor, que se carga con ajax porque no quiero que el contenido del div sea indexable por google, además el div en una posición absoluta pero lo quiero centrado independiente de la resolución de la pantalla del user…. jeje y no vale con poner lo que me comentas.