Centrar un div con jquery

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>

13 opiniones en “Centrar un div con jquery”

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

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

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

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

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

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

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

Deja un comentario

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