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,cambiar el tamaño de un div con jquery boton,alinear div en javascript,colocar divs jquery,como centar un div horizontal y verticalmente para cada resolucion,como hacer resize en div,hacer que un dialog jquery centrado,htmlentities al cargar pagina en jquery,jquery center div,jquery centrar div en pantalla firefox,jquery-resize images centrado,jqury dialog centrado en pantalla,obtener anchura de pantalla y hacer division jquery,centrar verticalemente div con jquery,centrar un elemento con jquery

13 comentario/s

Comentar