Centrar un div horizontal y verticalmente con jQuery
21 abr 2010 8 comentarios
Todos alguna vez hemos tenido que centrar un div horizontalmente y verticalmente, normalmente hemos empleado css para ello. Vamos a conocer otro método esta vez en javascript con jquery utilizando una simple función en la que bastará con pasarle la clase o id del div a centrar 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(){
// aquí le pasamos la clase o id de nuestro div a centrar (en este caso "caja")
$('.caja').css({
position:'absolute',
left: ($(window).width() - $('.caja').outerWidth())/2,
top: ($(window).height() - $('.caja').outerHeight())/2
});
});
// Ejecutamos la función
$(window).resize();
});
$(window).resize(function(){
// aquí le pasamos la clase o id de nuestro div a centrar (en este caso "caja")
$('.caja').css({
position:'absolute',
left: ($(window).width() - $('.caja').outerWidth())/2,
top: ($(window).height() - $('.caja').outerHeight())/2
});
});
// Ejecutamos la función
$(window).resize();
});
Modo de uso:
Mi nombre es Jorge, y soy de León. Desde hace algo más de 6 años trabajo de desarrollador web en las disciplinas de diseño, programación y SEO.
8 Comentarios
Ms, el 11/09/2010 a las 19:38:13
esta misma configuracion se puede establecer para plugins?
Como se puede crear una pagina con diferentes programaciones y ponerlas en el lugar adecuado de la pagiana.
Gracias
Joel, el 29/06/2011 a las 20:10:51
excelente el ejemplo, probado y funcionando, gracias
satoru, el 16/08/2011 a las 04:59:08
hola podrias subir o enviarme un ejemplo mas completo por que me tira este error
$ is not definet
tendria que poner un encabezado de jquery para que lo acepte?
ddsign, el 25/08/2011 a las 10:10:15
Satoru, tienes que llamar a la librería jquery primero, te paso este código:
Untitled Document
$(document).ready(function(){
$(window).resize(function(){
// aquí le pasamos la clase o id de nuestro div a centrar (en este caso “caja”)
$(‘.caja’).css({
position:’absolute’,
left: ($(window).width() – $(‘.caja’).outerWidth())/2,
top: ($(window).height() – $(‘.caja’).outerHeight())/2
});
});
// Ejecutamos la función
$(window).resize();
});
esta es la caja que quiero centrar
ddsign, el 25/08/2011 a las 10:12:17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(window).resize(function(){
// aquí le pasamos la clase o id de nuestro div a centrar (en este caso "caja")
$(‘.caja’).css({
position:’absolute’,
left: ($(window).width() – $(‘.caja’).outerWidth())/2,
top: ($(window).height() – $(‘.caja’).outerHeight())/2
});
});
// Ejecutamos la función
$(window).resize();
});
</script>
</head>
<body >
<div class="caja" style="border:1px solid red; ">
esta es la caja que quiero centrar
</div>
</body>
</html>
Ari, el 21/11/2011 a las 19:39:16
Así es en Plugin Jquery – Ari Copyright
(function($){
$.fn.center = function(cont){
$(this).css({top: ($(cont).height() – $(this).outerHeight())/2});
$(this).css({left: ($(cont).width() – $(this).outerWidth())/2});
}
})(jQuery);
Se llamaría así:
$(‘#caja’).centrar(‘body’);
Donde dice #caja iría el elemento a centrar y en body (window o html) el contenedor, pudiendo ser el window-html-body u otro elemento (por ejemplo un icono centrado en un botón).
Ari, el 07/12/2011 a las 23:59:26
Corrección!
(function($){
$.fn.centrar = function(cont){
$(this).css(‘position’,'absolute’);
$(this).css({top: ($(cont).height() – $(this).outerHeight())/2});
$(this).css({left: ($(cont).width() – $(this).outerWidth())/2});
}
})(jQuery);
Se le de posición absoluta al elemento a centrar
jose, el 14/12/2011 a las 18:32:57
y si en vez de tener un div con unas dimensiones establecidas, esas dimensiones son auto xq en dicho div se carga diferente contenido como podría solucionarlo?