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>

Tags de búsquedas:

mostrar un div dentro de un dialog jquery,centrar div con javascript,div centrado pantalla,centrar div en pantalla,cambiar el tamaño de un div con jquery boton,poner una imagen en el centro con jquery,posicionar div al centro vertical con jquery,jquery center div,javascript situar div en una posición,javascript centrar div en pantalla,javascript centar div,htmlentities al cargar pagina en jquery,hacer que un dialog jquery centrado,funcion window height,div redimensionable con contenido alineado al centro

Noticias relacionadas »

13 comentarios en Centrar un div con jquery

  1. Alex
    / Responder

    Hola,

    me funciona con IE, pero no en Firefox ni en Chrome

    Saludos

    • Pedro
      / Responder

      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 😉

      • Alex
        / Responder

        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

  2. Roman
    / Responder

    Disculpa, ya funcionó, tenía mal el nombre de mi DIV, disculpa 🙁

  3. Roman
    / Responder

    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

    • Pedro Ventura
      / Responder

      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.

  4. javier
    / Responder

    Gracias Pedro me sirvió mucho! Sí funciona!

  5. Gerardo
    / Responder

    Gracias, justo lo que andaba buscando para un proyecto! 😉
    Es mas facil que usar css.

  6. Fernando
    / Responder

    antes del “?” iba div id=”contenedor_caja”

  7. Fernando
    / Responder

    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

    • Pedro Ventura
      / Responder

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

  8. mauro
    / Responder

    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.

    • Pedro Ventura
      / Responder

      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 *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Invertir en criptomonedas: »

 

Cómo comprar bitcoin

Invertir y comprar Bitcoin y otras altcoins es más fácil de lo que crees.

1) Si sólo quieres comprar Bitcoin, Ethereum o Litecoin como inversión, tu opción es Coinbase

2) Si quieres probar con otras criptomonedas tu opción es Binance

3) Cualquier duda escríbeme con total libertad al formulario de contacto para resolver dudas: https://www.pedroventura.com/contacto/

¡Comparte este artículo! »

  • Irene (3 días)
    I used www.zerobounce.net and it is an amazing platform for…
  • Felipe Albornoz (4 días)
    Agradecido. Saludos.
  • Joel (2 semanas)
    Este grupo es buenísimo hay personas de todo el mundo…
  • Citricus (3 semanas)
    Análisis muy buenos y detallados: Crypto Trading Campus https://t.me/cryptotradingcampus
  • Vane (2 meses)
    Hola muy buena información, en lo personal mino con Javascript…
  • Gabriel Roncancio (2 meses)
    Hola Pedro, gracias por compartir. Tu artículo me dió algunas…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

Leer entrada anterior
Configura FTP en wordpress para actualizar automaticamente

Consejo para wordpress y actualizar automáticamente. Cada vez que hay una actualización de un plugin o una nueva versión del...

Cerrar