RSS

Mostrar div centrado en pantalla mediante CSS o jQuery

24 oct

Hay muchos usos habituales de un div en los cuales queremos que aparezcan totalmente centrados mediante el uso de jQuery. Mediante CSS simple podríamos conseguirlo siempre y cuando supiésemos de antemano el tamaño del div. Por ejemplo si tuviésemos un div de 400px de alto por 600px de ancho lo obtendríamos con un código tal como este:

#divname {
	display:block; 
	width:600px; 
	height:400px; 
	position:absolute; 
	top:50%; 
	left:50%; 
	margin-top:-200px; 
	margin-left:-300px;
}

De esta forma le indicamos que se ubique al 50% del alto y del ancho de la pantalla, y como la posición se establece respecto a la esquina superior izquierda del div, para tenerlo perfectamente centrado debemos restar la mitad del ancho del div al margin-left y la mitad del alto al margin-top. Sencillo pero al realizar una web con contenido dinámico, en la mayor parte de los casos no sabremos el tamaño exacto del div que deseamos centrar.

Podríamos pensar en varios casos en los cuales se necesita este uso, capa-ventana popup, confirm personalizado, lightbox que muestre contenido multimedia, etc…

Para todos esos casos podemos usar un código tal que:

var popup = $('#popup');
popup.css({ 
	'left': ($(window).width() / 2 - $(popup).width() / 2) + 'px', 
	'top': ($(window).height() / 2 - $(popup).height() / 2) + 'px' 
});
About these ads
 
3 comentarios

Publicado por en 24 octubre, 2011 en CSS, jQuery

 

Etiquetas: , , ,

3 Respuestas a “Mostrar div centrado en pantalla mediante CSS o jQuery

  1. Jose

    3 agosto, 2012 at 18:18

    Muy bien con lo del CSS, es perfecto! sin embargo aun no conozco mucho de jQuery, creo que para que tu ejemplo sea sensacional tal vez podrías agregar un pequeño ejemplo con el HTML correspondiente usando tanto el CSS como el jQuery

    Saludos y gracias por compartir tus conocimientos =)

     
  2. Mistaker47

    27 noviembre, 2012 at 16:15

    Lo que esta haciendo es modificar las propiedades de “style” del “div” en este caso.

    Para obtener la dimensión de la ventana en JavaScript
    centro_x=window.innerWidth/2;
    centro_y=window.innerHeight/2;

    Para obtener el centro de tu “div” con id=”popup”
    el = document.getElementById(“popup”);
    centro_div_x=parseInt(el.style.width)/2;centro_div_y=parseInt(el.style.height)/2;

    Asignamos la nueva posición de nuestro “div” para que aparezca en el centro.

    el=document.getElementById(“popup”);
    el.style.left = centro_x – centro_div_x + ‘px’;
    el.style.top = centro_y – centro_div_y + ‘py’;

    Ejemplo de nuestro “div”

    Contenido

     
  3. Joaquin

    22 marzo, 2013 at 01:00

    Gracias, se me habia olvidado, excelente aporte.

     

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: