j'ai mis 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});
    });
);

c'est ça ?

mise à jour:

de CSS-Tricks

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

je recommande jQueryUI Position de l'utilitaire

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

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

c'est mon tour. 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, le rendant idéal pour ce genre 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 cela:

Exemple Pratique

.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 dans css.

calc()

tableau de soutien du navigateur

je développe sur la grande réponse donnée par @TonyL. Je suis ajoutant des Mathématiques.abs() pour envelopper les valeurs, et aussi, je prends en compte que jQuery peut-être dans "pas de conflit" mode, comme par exemple dans WordPress.

je vous recommande d'envelopper les valeurs supérieure et gauche avec des mathématiques.abs() comme je l'ai fait ci-dessous. Si la fenêtre est trop petite, et que votre Dialogue modal a une zone de fermeture en haut, cela empêchera le problème de ne pas voir la zone de fermeture. Tony fonction aurait eu valeurs potentiellement négatives. Un bon exemple sur la façon dont vous finissez 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 un tel cas, la boîte de dialogue close sur une boîte de dialogue modale (si en haut) pourrait ne pas être visible et cliquable.

l'autre chose que je fais est d'accélérer un peu en cachant l'objet $(window) de sorte que je réduise les traverses 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 utiliser, vous feriez quelque chose comme:

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

j'utiliserais la fonction jQuery UI position .

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 " à centrer alors le script suivant centrerait le div dans la fenêtre sur document ready. (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>

je voudrais corriger une question.

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

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 , exemple:

window.height est 600

this.height est 650

600 - 650 = -50  

-50 / 2 = -25

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

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 .

ceci n'a pas été testé, mais quelque chose comme ça devrait fonctionner.

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

la composante de transition de cette fonction a fonctionné très mal pour moi dans Chrome (n'a pas testé ailleurs). Je redimensionnais la fenêtre et mon élément se déplaçait lentement, essayant de rattraper le temps perdu.

ainsi la fonction suivante commente cette partie. En outre, j'ai ajouté des paramètres pour passer dans les booléens optionnels x & y, 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);

Edit:

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) mot à mot de la façon dont cela a été traité sur http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - il est fortement piraté pour IE mais fournit une pure CSS façon 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 couru ceci à travers des browsershots et il semble bien; si pour rien d'autre, je vais garder l'original ci-dessous de sorte que le pourcentage de manipulation de marge comme dicté par CSS spec voit la lumière du jour.

Origine:

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

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

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

C'est ça? Le coin supérieur gauche de conteneur serait au centre de l'écran, et avec des marges négatives le contenu réapparaîtra magiquement dans le centre absolu de la page! http://jsfiddle.net/rJPPc /

faux! Le positionnement Horizontal est correct, mais verticalement... Oh, je vois. Apparemment dans css, quand on fixe les marges supérieures en %, la valeur est calculée comme un pourcentage toujours par rapport à la largeur du bloc contenant . Comme des pommes et des oranges! Si vous ne me faites pas confiance ou Mozilla doco, avoir un jeu avec le violon ci-dessus en ajustant la largeur du contenu et être étonné.

...

maintenant, CSS étant mon gagne-pain, Je n'étais pas sur le point d'abandonner. En même temps, je préfère les choses faciles, donc j'ai emprunté les résultats d'un tchèque CSS gourou et en fait un violon de travail. Bref, nous créons une table dans laquelle vertical-align est placé 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 le bon vieux 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 /

pour centrer l'élément par rapport au viewport du navigateur (fenêtre), n'utilisez pas position: absolute , la valeur de position correcte doit être fixed (l'absolu signifie:"l'élément est positionné par rapport à son premier élément ancêtre positionné (non statique)").

cette version alternative du plugin center proposé utilise " % "au lieu de" px "ainsi quand vous redimensionnez la fenêtre le contenu est garder 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: 0 pour exclure les marges de contenu de la largeur/hauteur (puisque nous utilisons la position fixe, avoir des marges n'a aucun sens). Selon le jquery doc utilisant .outerWidth(true) devrait inclure marges, mais il 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

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

ce que j'ai ici est une méthode de" Centre "qui assure que l'élément que vous tentez de centrer n'est pas seulement de positionnement" fixe "ou" absolu", mais il assure aussi que l'élément que vous centrez est plus petit que son parent, ce centre et l'élément relatif à est parent, si les éléments parent est plus petit que l'élément lui-même, il pillera le DOM au parent suivant, et le centre relatif à 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
  });
});

s'il vous Plaît 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 est scrolled. Ce que vous voulez est d'utiliser le positionnement fixe. J'ai essayé ce plugin de Centre fixe énumérés ci-dessus et cela semble résoudre le problème bien. Le positionnement fixe vous permet de centrer un élément une fois, et la propriété CSS prendra soin de maintenir cette position pour vous chaque fois que vous faites défiler.

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 cette

j'ai utilisé ceci 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;
}

Ouvrir l'élément

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

});

MA MISE À JOUR DE LA RÉPONSE DE TONY L C'est la dernier version de sa réponse que j'utilise religieusement maintenant. J'ai pensé que je voudrais le partager, car il ajoute un peu plus de fonctionnalités pour diverses situations que vous pouvez avoir, comme les différents types de position ou ne voulant horizontale/centrage 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é dans l'ensemble de votre site facilement, ainsi que facilement portable à tout autre site que vous créez. Plus de solutions de rechange ennuyeuses pour centrer quelque chose correctement.

J'espère que c'est utile pour quelqu'un dehors! Profiter.

Beaucoup de façons de le faire. Mon objet est caché avec affichage: Aucun juste à l'intérieur de L'étiquette de corps de sorte que le positionnement est relatif au corps. Après avoir utilisé $("#object_id").show () , j'appelle $("#object_id").centre ()

j'utilise position:absolute parce que c'est possible, surtout sur un petit appareil mobile, que la fenêtre modale est plus grande que la fenêtre de l'appareil, en certains modes de contenu pourrait être inaccessible si le positionnement a été fixé.

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

normalement, je le ferais avec CSS seulement... mais puisque tu as demandé un moyen de faire ça avec jQuery...

le code suivant centre une div à la fois 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 )

CSS solution en deux lignes seulement

il centralise votre div interne horizontalement et verticalement.

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

}

pour alignement horizontal seulement, modifier

margin: 0 auto;

et pour vertical, changement

margin: auto 0;

Je ne vous recommande pas d'utiliser jQuery pour centrer le conteneur, parce que c'est trop lourd pour être calculé et cela dépend du JavaScript. Par exemple, si vous concevez une page simple, devrez-vous charger jQuery seulement pour centrer un noeud d'élément "div"?

le code suivant résout le problème proposé en utilisant les caractéristiques" table". Il est exactement calculé sans causer de problème d'affichage:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Centering issue</title>
        <style>
            html,body {
                padding: 0;
                margin: 0;
                height: 100%
            }
            .outer {
                display: table;
                width: 100%;
                height: 100%;
                border-collapse: collapse
            }
            .inner {
                display: table-cell;
                vertical-align: middle
            }
            #sample {
                margin: 0 auto;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                background: #ccc
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <div id="sample">Sample</div>
            </div>
        </div>
    </body>
</html>

le suivant résout la même proposition problème d'utilisation du nouveau concept flexbox. Il est également exactement calculé sans causer de problème d'affichage. Je préfère la disposition "table" (la précédente) au lieu de cette solution, parce qu'elle a une meilleure compatibilité avec les navigateurs très anciens et, par conséquent, vous couvrez encore plus de clients sans aucun problème du tout.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Centering issue</title>
        <style>
            html,body {
                padding: 0;
                margin: 0;
                height: 100%
            }
            .centerer {
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 100%
            }
            #sample {
                margin: 0 auto;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                background: #ccc
            }
        </style>
    </head>
    <body>
        <div class="centerer">
            <div id="sample">Sample</div>
        </div>
    </body>
</html>

j'espère que cette suggestion vous aide. :)

Bye

vous pouvez utiliser le CSS translate propriété:

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

Lire ce post pour plus de détails.

pourquoi n'utilisez-vous pas CSS pour centrer un div?

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