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ículo ubicado en:

Artículos relacionados

  1. funciones Javascript – setInterval() clearInterval() setTimeout() ESTE POST HA SIDO ACTUALIZADO Y TRADUCIDO, CONSULTARLO EN: funciones Javascript – setInterval() clearInterval() setTimeout() – Parte 2 setInterval() This method is used to repeatedly execute a function at a...
  2. Funciones en PHP no tan usadas pero útiles Incluso después de trabajar con PHP desde hace muchos años, a veces nos encontramos con funciones y funcionalidades o características de las que no eramos conscientes. Algunas pueden ser útiles...
  3. recortar imagenes en cakephp con jquery. Para poder recortar una imagen mediante una seleccion se consigue con imgAreaSelect que es un plugin de JQuery para seleccionar un area de una imagen. El publin se puede configurar...
  4. Usar Min/Max Width y Height en CSS Incluso si estás empezando con CSS, probablemente ya has utilizado las propiedades width y height. Pero te habrás dado cuenta de que esas propiedades pueden poner restricciones innecesarias a los...

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