Utiliser jQuery pour centrer une DIV sur l'écran

StackOverflow https://stackoverflow.com/questions/210717

Question

Comment définir un <div> centre de l'écran à l'aide de jQuery?

Était-ce utile?

La solution

J'aime ajouter des fonctions à jQuery afin que cette fonction puisse vous 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;
}

Nous pouvons maintenant écrire: 

$(element).center();

Démo: Fiddle (avec paramètre ajouté)

Autres conseils

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 exact?

UPDATE:

De astuces CSS 

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

Je recommanderais l'utilitaire de positionnement jQueryUI

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

qui vous offre bien plus de possibilités que le seul centrage ...

Voilà ce que je vais faire. J'ai fini par l'utiliser pour mon clone Lightbox. Le principal avantage de cette solution est que l’élément restera automatiquement centré même si la fenêtre est redimensionnée, ce qui le rend idéal 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;
}

Vous pouvez utiliser CSS seul pour vous centrer comme suit:

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 d'effectuer des calculs de base en css.

Documentation MDN pour <=>
Tableau de prise en charge du navigateur

Je développe la grande réponse donnée par @TonyL. J'ajoute Math.abs () pour envelopper les valeurs et je tiens également compte du fait que jQuery pourrait être dans & "Aucun conflit &"; comme par exemple dans WordPress.

Je vous recommande d’envelopper les valeurs top et left 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 boîte fermée en haut, le problème de ne pas voir la boîte fermée sera évité. La fonction de Tony aurait eu des valeurs potentiellement négatives. Si vous avez une boîte de dialogue centrée volumineuse alors que l’utilisateur final a installé plusieurs barres d’outils et / ou augmenté sa police par défaut, voici un bon exemple. Dans ce cas, la case à cocher de la boîte de dialogue modale (si en haut) peut ne pas être visible et cliquable.

L’autre chose que je fais est d’accélérer un peu la tâche en mettant en cache l’objet $ (window) afin de réduire les traversées de DOM supplémentaires et d’utiliser 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();
});

J'utiliserais la interface utilisateur jQuery position.

Voir la démonstration en cours . 

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

Si j'ai un div avec l'ID & "test &" pour centrer alors le script suivant centrerait la div dans la fenêtre sur le document prêt. (Les valeurs par défaut pour & "; mon &" et & "à &" dans les options de position sont & "au centre &";)

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

Je voudrais corriger un problème. 

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

Le code ci-dessus ne fonctionnera pas dans les cas où this.height (supposons que l'utilisateur redimensionne l'écran et que le contenu soit dynamique) et scrollTop() = 0, exemple:

window.height est 600
650 est -25 

600 - 650 = -50  

-50 / 2 = -25

Le champ est maintenant centré <=> hors écran.

Je ne pense pas qu'il serait préférable d'avoir une position absolue si vous voulez un élément toujours centré au milieu de la page. Vous voulez probablement un élément fixe. J'ai trouvé un autre plugin de centrage jQuery qui utilisait un positionnement fixe. Il s’appelle centre fixe .

Ceci n'a pas été testé, mais quelque chose comme cela devrait fonctionner. 

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});

Le composant de transition de cette fonction fonctionnait très mal pour moi dans Chrome (n’a pas été testé ailleurs). Je redimensionnais un peu la fenêtre et mon élément filait lentement, essayant de rattraper son retard.

Donc, la fonction suivante commente cette partie. De plus, j’ai ajouté des paramètres permettant de passer en option x & Amp; y booleans, si vous voulez centrer verticalement mais pas horizontalement, par exemple: 

// Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

Pour centrer l'élément par rapport à la fenêtre du navigateur, n'utilisez pas position: absolute, la valeur de position correcte doit être fixed (valeur absolue: & "; L'élément est positionné par rapport à sa première élément ancêtre positionné (non statique) ").

Cette version alternative du plug-in center proposé utilise "% " au lieu de " px " Ainsi, lorsque vous redimensionnez la fenêtre, le contenu est maintenu au centre: 

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

Vous devez mettre margin: 0 pour exclure les marges du contenu de la largeur / de la hauteur (puisque nous utilisons une position fixe, avoir des marges n’a aucun sens). Selon la documentation jQuery, utiliser .outerWidth(true) devrait inclure les marges, mais cela ne fonctionnait pas comme prévu lorsque j'ai essayé Chrome.

Le 50*(1-ratio) vient de:

Largeur de la fenêtre: W = 100%

Largeur de l'élément (en%): w = 100 * elementWidthInPixels/windowWidthInPixels

eux pour calculer le centre gauche: 

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

C'est génial. J'ai ajouté une fonction de rappel 

center: function (options, callback) {



if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

Modifier:

Si la question m'a appris quelque chose, c'est ceci: ne changez pas quelque chose qui fonctionne déjà:)

Je fournis une copie (presque) exacte de la manière dont cela a été traité sur http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - il est fortement piraté pour IE, mais fournit un pur moyen de répondre à la question: 

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

Fiddle: http://jsfiddle.net/S9upd/4/

J'ai parcouru les vues de navigateurs et cela semble aller; si pour rien d'autre, je conserve l'original ci-dessous pour que le traitement du pourcentage de marge dicté par la spécification CSS soit visible.

Original:

On dirait que je suis en retard à la fête!

Certains commentaires ci-dessus suggèrent qu'il s'agit d'une question CSS - séparation des problèmes et de tous les problèmes. Permettez-moi de commencer par dire que CSS vraiment s’est tiré dans le pied avec celui-ci. Je veux dire, comme cela serait facile de faire ceci: 

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

D'accord? Le coin supérieur gauche du conteneur serait au centre de l'écran et, avec les marges négatives, le contenu réapparaîtrait comme par magie au centre absolu de la page! http://jsfiddle.net/rJPPc/

Mauvais! Le positionnement horizontal est correct, mais verticalement ... Oh, je vois. Apparemment en css, lors de la définition des marges supérieures en%, la valeur est calculée comme un pourcentage toujours relatif à la largeur du bloc conteneur . Comme des pommes et des oranges! Si vous ne me faites pas confiance, ni à Mozilla Doco, jouez avec le violon précédent en ajustant la largeur du contenu et laissez-vous surprendre.

Maintenant, CSS étant mon pain quotidien, je ne voulais pas abandonner. En même temps, comme je préfère les choses faciles, j’ai emprunté les conclusions d’un Gourou tchèque du CSS et en a fait un violon fonctionnel. En résumé, nous créons un tableau dans lequel vertical-align est défini au milieu: 

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

Et la position du contenu est ajustée avec le bon vieux marge: 0 auto; : 

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

Travailler le violon comme promis: http://jsfiddle.net/teDQ2/

Ce que j'ai ici est un " centre " méthode qui assure que l’élément que vous tentez de centrer n’est pas seulement de & "fixe &"; ou " absolu " mais cela garantit également que l'élément que vous centrez est plus petit que son parent, ce centre et cet élément par rapport à son parent, si l'élément parent est plus petit que l'élément lui-même, il va piller le DOM jusqu'au prochain parent, et le centrer par rapport à cela. 

$.fn.center = function () {
        /// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>

        var element = $(this),
            elementPos = element.css('position'),
            elementParent = $(element.parent()),
            elementWidth = element.outerWidth(),
            parentWidth = elementParent.width();

        if (parentWidth <= elementWidth) {
            elementParent = $(elementParent.parent());
            parentWidth = elementParent.width();
        }

        if (elementPos === "absolute" || elementPos === "fixed") {
            element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
        }
    };

j'utilise ceci: 

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

Veuillez utiliser ceci: 

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();

vous obtenez cette mauvaise transition car vous ajustez la position de l'élément à chaque défilement du document. Ce que vous voulez, c'est utiliser un positionnement fixe. J'ai essayé ce plugin de centre fixe répertorié ci-dessus et cela semble résoudre le problème correctement. Le positionnement fixe vous permet de centrer un élément une fois, et la propriété CSS se chargera de maintenir cette position pour vous à chaque défilement.

Voici ma version. Je peux le changer après avoir examiné ces exemples. 

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};

Pas besoin de jquery pour cela

Je l'ai utilisé pour centrer l'élément Div. Css Style, 

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Élément ouvert 

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});

MA MISE À JOUR DE LA RÉPONSE DE TONY L'S Ceci est la version modifiée de sa réponse que j'utilise religieusement maintenant. Je pensais le partager, car il ajoute un peu plus de fonctionnalités à diverses situations, telles que différents types de position ou ne souhaitant que le centrage horizontal / vertical plutôt que les deux.

center.js: 

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

Dans mon <head>: 

<script src="scripts/center.js"></script>

Exemples d'utilisation: 

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

Il fonctionne avec n’importe quel type de positionnement et peut être utilisé sur l’ensemble de votre site, ainsi que sur tout autre site que vous créez. Finies les solutions de contournement ennuyeuses pour centrer correctement quelque chose.

J'espère que cela est utile pour quelqu'un! Profitez.

Beaucoup de façons de le faire. Mon objet est maintenu masqué avec display: none juste à l'intérieur de la balise BODY, de sorte que le positionnement est relatif au BODY. Après avoir utilisé $ (& "; #Object_id &"). Show () , j'appelle $ (& "; #Object_id &"). centre ()

J'utilise position: absolute car il est possible, en particulier sur un petit appareil mobile, que la fenêtre modale soit plus grande que la fenêtre de l'appareil. Dans ce cas, une partie du contenu modal pourrait être inaccessible si le positionnement a été fixé.

Voici ma version basée sur les réponses des autres et sur mes besoins spécifiques: 

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

Normalement, je ne le ferais qu'avec du CSS ... mais puisque vous vous êtes demandé comment faire cela avec jQuery ...

Le code suivant centre un div horizontalement et verticalement à l'intérieur de son conteneur: 

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");
body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

(voir aussi ce violon )

solution CSS En deux lignes uniquement

Il centralise votre div interne horizontalement et verticalement. 

#outer{
  display: flex;
}
#inner{
margin: auto;

}

pour seulement aligner horizontalement, changer 

margin: 0 auto;

et pour vertical, changez 

margin: auto 0;

Vous pouvez utiliser la propriété CSS translate: 

position: absolute;
transform: translate(-50%, -50%);

Lire cet article pour plus de détails.

Pourquoi n'utilisez-vous pas CSS pour centrer une div? 

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top