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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(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(); }); |
Modo de uso:
1 2 3 | <div class="caja"> <p>Div centrado utilizando jquery</p> </div> |
