Centrar un div con jquery

por

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.

[code]
$(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();

});
[/code]

[code]
<div id="contenedor_caja">
<p>Contenido del div</p>
</div>
[/code]

Artículos relacionados

  1. Las 10 mejores herramientas de análisis de Twitter para especialistas en marketing de redes sociales Las redes sociales son un método útil para que cualquier persona lleve el marketing a un nivel superior . Twitter es una opción si desea hacer esto, pero a veces...
  2. Revelar las contraseñas con Javascript Interesante manera para obtener las contraseñas de un formulario con este simple fragmento de código javascript, que te muestra en un popup el contenido de los campos pass con *...
  3. Redirecciones en WordPress: Consejos y plugins Las ultimas actualizaciones de WordPress han permitido a los desarrolladores personalizar sus sitios web muy rápidamente. Ahora Es cada vez mas sencillo actualizar las áreas de tu tema, sustituir o...
  4. Herramientas para crear anuncios de manera gratuita Ya sea que desee diseñar anuncios para su nuevo producto o diseñar banners para su perfil en línea en las redes sociales, una herramienta de diseño creativo es lo que...

13 comentarios en «Centrar un div con jquery»

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

    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.

      Responder

  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

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

      Responder

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

    Responder

Deja un comentario