Pregunta Usar jQuery para centrar un DIV en la pantalla


¿Cómo hago para configurar un <div> en el centro de la pantalla usando jQuery?


730
2017-10-17 00:11


origen


Respuestas:


Me gusta agregar funciones a jQuery para que esta función ayude:

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

Ahora solo podemos escribir:

$(element).center();

Manifestación: Violín (con el parámetro agregado)


1045
2018-02-13 13:21



Yo puse un plugin jquery aquí

MUY CORTA VERSIÓN

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

VERSION CORTA

(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    }); 
})(jQuery);

Activado por este código:

$('#mainDiv').center();

VERSIÓN EN PLUGIN

(function($){
     $.fn.extend({
          center: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, options);
               return this.each(function() {
                    var props = {position:'absolute'};
                    if (options.vertical) {
                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                         top = (top > options.minY ? top : options.minY);
                         $.extend(props, {top: top+'px'});
                    }
                    if (options.horizontal) {
                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'px'});
                    }
                    if (options.transition > 0) $(this).animate(props, options.transition);
                    else $(this).css(props);
                    return $(this);
               });
          }
     });
})(jQuery);

Activado por este código:

$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() {
        $('#mainDiv').center({transition:300});
    });
);

está bien ?

ACTUALIZAR:

De CSS-Tricks

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}

137
2017-12-10 11:08



yo recomendaria jQueryUI Posición utilidad

$('your-selector').position({
    of: $(window)
});

que te ofrece muchas más posibilidades que solo centrar ...


59
2018-01-22 08:24



Aquí está mi ir en eso. Terminé usándolo para mi clon de Lightbox. La principal ventaja de esta solución es que el elemento se mantendrá centrado automáticamente incluso si la ventana cambia de tamaño, lo que lo hace ideal para este tipo de uso.

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}

40
2018-06-28 15:16



Puedes usar CSS solo para centrarlo así:

Ejemplo de trabajo

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2); /* height divided by 2*/
    left:calc(50% - 50px/2); /* width divided by 2*/
}
<div class="center"></div>

calc() le permite hacer cálculos básicos en css.

Documentación de MDN para calc()
Tabla de soporte del navegador 


25
2018-04-23 06:32



Me estoy expandiendo sobre la gran respuesta dada por @TonyL. Estoy agregando Math.abs () para ajustar los valores, y también tengo en cuenta que jQuery podría estar en modo "sin conflicto", como por ejemplo en WordPress.

Recomiendo que ajuste los valores superiores e izquierdos con Math.abs () como he hecho a continuación. Si la ventana es demasiado pequeña, y su diálogo modal tiene un cuadro de cierre en la parte superior, esto evitará el problema de no ver el cuadro de cierre. La función de Tony habría tenido valores potencialmente negativos. Un buen ejemplo de cómo se terminan con los valores negativos es si tiene un gran cuadro de diálogo centrado, pero el usuario final ha instalado varias barras de herramientas y / o aumentado su fuente predeterminada; en tal caso, el cuadro Cerrar en un cuadro de diálogo modal (si en la parte superior) puede no ser visible y hacer clic.

La otra cosa que hago es acelerar esto un poco al almacenar en caché el objeto $ (ventana) para que reduzca los cruces DOM adicionales, y utilizo un CSS de clúster.

jQuery.fn.center = function ($) {
  var w = $(window);
  this.css({
    'position':'absolute',
    'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
    'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
  });
  return this;
}

Para usar, harías algo como:

jQuery(document).ready(function($){
  $('#myelem').center();
});

14
2017-07-31 09:37



Yo usaría el jQuery UI  position función.

Ver demostración de trabajo.

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

Si tengo un div con id "test" para centrarme, el siguiente script centraría el div en la ventana del documento listo. (los valores predeterminados para "mi" y "a" en las opciones de posición son "centro")

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>

10
2018-03-08 18:27



Me gustaría corregir un problema.

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

El código anterior no funcionará en los casos en que this.height (supongamos que el usuario cambia el tamaño de la pantalla y el contenido es dinámico) y scrollTop() = 0ejemplo

window.height es 600
this.height es 650

600 - 650 = -50  

-50 / 2 = -25

Ahora la caja está centrada -25 fuera de la pantalla.


8
2017-07-03 09:25



No creo que tener una posición absoluta sea mejor si quieres un elemento siempre centrado en el medio de la página. Probablemente quieras un elemento fijo. Encontré otro complemento de centrado jquery que usaba un posicionamiento fijo. Se llama centro fijo.


6
2017-10-17 03:45