Question Utiliser jQuery pour centrer un DIV sur l'écran


Comment puis-je définir un <div> au centre de l'écran en utilisant jQuery?


730
2017-10-17 00:11


origine


Réponses:


J'aime ajouter des fonctions à jQuery afin que cette fonction puisse aider:

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;
}

Maintenant, nous pouvons juste écrire:

$(element).center();

Démonstration Violon (avec paramètre ajouté)


1045
2018-02-13 13:21



Je mets un plugin jquery ici

VERSION TRÈS COURTE

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

VERSION COURTE

(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);

Activé par ce code:

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

VERSION 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);

Activé par ce code:

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

Est-ce correct ?

METTRE À JOUR :

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



je recommanderais Utilitaire de position jQueryUI

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

ce qui vous donne beaucoup plus de possibilités que seulement le centrage ...


59
2018-01-22 08:24



Voici mon aller. J'ai fini par l'utiliser pour mon clone Lightbox. Le principal avantage de cette solution est que l'élément reste centré automatiquement même si la fenêtre est redimensionnée, ce qui la rend idéale pour ce type d'utilisation.

$.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



Vous pouvez utiliser CSS seul pour centrer comme ceci:

Exemple de travail

.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() vous permet de faire des calculs de base en CSS.

MDN Documentation pour calc()
Table de support du navigateur 


25
2018-04-23 06:32



Je développe la bonne réponse donnée par @TonyL. J'ajoute Math.abs () pour envelopper les valeurs, et je prends également en compte que jQuery peut être en mode "pas de conflit", comme par exemple dans WordPress.

Je recommande que vous enveloppiez les valeurs supérieure et gauche avec Math.abs () comme je l'ai fait ci-dessous. Si la fenêtre est trop petite et que votre boîte de dialogue modale a une case de fermeture en haut, cela évitera le problème de ne pas voir la boîte de fermeture. La fonction de Tony aurait eu des valeurs potentiellement négatives. Un bon exemple sur la façon dont vous obtenez des valeurs négatives est si vous avez une grande boîte de dialogue centrée mais que l'utilisateur final a installé plusieurs barres d'outils et / ou augmenté sa police par défaut - dans ce cas, la boîte de dialogue modale en haut) peut ne pas être visible et cliquable.

L'autre chose que je fais est d'accélérer un peu en mettant en cache l'objet $ (window) afin de réduire les traversées de DOM supplémentaires, et j'utilise un cluster CSS.

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;
}

Pour l'utiliser, vous feriez quelque chose comme:

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

14
2017-07-31 09:37



J'utiliserais le interface utilisateur jQuery  position fonction.

Voir la démo de travail.

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

Si j'ai un div avec id "test" au centre alors le script suivant centre le div dans la fenêtre sur le document prêt. (les valeurs par défaut pour "my" et "at" dans les options de position sont "center")

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

10
2018-03-08 18:27