Comment dois-je procéder pour définir un <div>au centre de l'écran à l'aide de jQuery?

J'aime ajouter des fonctions à jQuery donc cette fonction aiderait:

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 simplement écrire:

$(element).center();

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

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 ?

MISE À JOUR :

De CSS-Tricks

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

Je recommanderais l' utilitaire jQueryUI Position

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

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

Voici mon coup. J'ai fini par l'utiliser pour mon clone Lightbox. Le principal avantage de cette solution est que l'élément restera centré automatiquement 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 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.

Documentation de MDN pour le calc()
tableau de prise en charge du navigateur

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

Je vous recommande d'envelopper les valeurs supérieures et gauches 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 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 vous retrouvez avec 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 case de fermeture d'une 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 cela en mettant en cache l'objet $ (window) afin de réduire les traversées DOM supplémentaires et d'utiliser un CSS de cluster.

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 utiliser, vous feriez quelque chose comme:

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

J'utiliserais la fonction jQuery UI position .

Voir la démonstration 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" à centrer, le script suivant centrera le div dans la fenêtre sur le document prêt. (les valeurs par défaut pour "mon" et "à" dans les options de position sont "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 le contenu est dynamique) et scrollTop() = 0, par exemple:

window.heightest 600
this.heightest650

600 - 650 = -50  

-50 / 2 = -25

Maintenant, la boîte est centrée -25hors écran.

Ce n'est pas testé, mais quelque chose comme ça devrait fonctionner.

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

Je ne pense pas qu'avoir une position absolue serait mieux 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 est appelé centre fixe .

Le composant de transition de cette fonction a vraiment mal fonctionné pour moi dans Chrome (n'a pas testé ailleurs). Je redimensionnais la fenêtre un tas et mon élément se baladait lentement, essayant de rattraper son retard.

Ainsi, la fonction suivante commente cette partie. De plus, j'ai ajouté des paramètres pour passer des booléens x & y facultatifs, 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 (fenêtre), ne pas utiliser position: absolute, la valeur de position correcte doit être fixed(signifie en absolu: "L'élément est positionné par rapport à son premier élément ancêtre positionné (non statique)").

Cette version alternative du plugin central proposé utilise "%" au lieu de "px", donc lorsque vous redimensionnez la fenêtre, le contenu reste centré:

$.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: 0pour exclure les marges de contenu de la largeur / hauteur (puisque nous utilisons une position fixe, avoir des marges n'a aucun sens). Selon le doc jQuery utilisant.outerWidth(true) devrait inclure des marges, mais cela n'a pas fonctionné comme prévu lorsque j'ai essayé dans 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 bien. 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
   }
}

Éditer:

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) textuelle de la façon dont cela a été géré sur http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - il est fortement piraté pour IE mais fournit un moyen CSS pur 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;}

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

J'ai exécuté cela par le biais de navigateurs et cela semble bien; si pour rien d'autre, je garderai l'original ci-dessous afin que le traitement du pourcentage de marge tel que dicté par les spécifications CSS voit le jour.

Original:

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

Il y a quelques commentaires ci-dessus qui suggèrent qu'il s'agit d'une question CSS - séparation des préoccupations et tout. Permettez-moi de préfacer cela en disant que CSS s'est vraiment tiré une balle dans le pied sur celui-ci. Je veux dire, comment serait-il facile de le faire:

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

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

Faux! Le positionnement horizontal est OK, mais verticalement ... Oh, je vois. Apparemment en CSS, lors de la définition des marges supérieures en%, la valeur est calculée en pourcentage toujours par rapport à la largeur du bloc conteneur . Comme des pommes et des oranges! Si vous n'avez pas confiance en moi ou en doco Mozilla, jouez avec le violon ci-dessus en ajustant la largeur du contenu et soyez étonné.

Maintenant, avec CSS étant mon pain et mon beurre, je n'allais pas abandonner. Dans le même temps, je préfère les choses faciles, j'ai donc emprunté les conclusions d'un gourou tchèque CSS et en ai fait un violon fonctionnel. Pour faire court, nous créons un tableau dans lequel l'alignement vertical est réglé au milieu:

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

Et que la position du contenu est affinée avec une bonne vieille marge: 0 auto; :

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

Violon de travail comme promis: http://jsfiddle.net/teDQ2/

Ce que j'ai ici est une méthode "centrée" qui garantit que l'élément que vous essayez de centrer est non seulement de positionnement "fixe" ou "absolu", mais il garantit également que l'élément que vous centrez est plus petit que son parent, ce centre et l'élément par rapport à est parent, si le parent des éléments est plus petit que l'élément lui-même, il pillera le DOM vers le parent suivant et le centrera 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 parce que vous ajustez la position de l'élément à chaque fois que le document défile. Ce que vous voulez, c'est utiliser un positionnement fixe. J'ai essayé le plugin central fixe répertorié ci-dessus et cela semble bien résoudre le problème. 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 fois que vous faites défiler.

Voici ma version. Je peux le changer après avoir regardé 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 ça

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

.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 que je le partagerais, car il ajoute un peu plus de fonctionnalités à diverses situations que vous pourriez avoir, telles que différents types deposition ou souhaitant uniquement un 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é facilement sur l'ensemble de votre site, ainsi que facilement portable sur tout autre site que vous créez. Plus de contournements ennuyeux pour centrer quelque chose correctement.

J'espère que cela sera utile pour quelqu'un là-bas! Prendre plaisir.

Beaucoup de façons de le faire. Mon objet est gardé caché avec affichage: aucun 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"). Center ()

J'utilise la position: absolue 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, auquel cas une partie du contenu modal pourrait être inaccessible si le positionnement était fixe.

Voici ma saveur basée sur les réponses des autres et 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;
    };

Vous pouvez utiliser la translatepropriété CSS :

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

Lisez cet article pour plus de détails.

Normalement, je le ferais uniquement avec CSS ... mais puisque vous vous avez demandé un moyen de le faire 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 seulement

Il centralise votre div intérieure horizontalement et verticalement.

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

}

pour l'alignement horizontal uniquement, changez

margin: 0 auto;

et pour vertical, changer

margin: auto 0;

Dites simplement: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));

Pourquoi vous n'utilisez pas CSS pour centrer un div?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}