Comment positionner un élément div au centre de l'écran? (JQuery)

j'ai besoin de la position d'un élément div au centre de l'écran. J'ai trouvé un code simple ci-dessous, mais j'ai besoin de centre de l'écran, pas de "hauteur totale /2" de la page!

ici est Jquery qui centre un élément mais pas l'écran;

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

comme je l'ai dit, j'ai besoin de calculer la réelle tailles d'écran (comme 1366*768 ou ce que les utilisateurs redimensionnée leurs navigateurs) et la position de l'élément au centre de l'écran. donc, si j'ai faites défiler la page, toujours centrée sur la div doit être au centre, encore une fois.

Cette réponse pourrait vous aider à aller dans la bonne direction. C'est un assez vieux thread, donc je suis sûr qu'il ya quelques belle bibliothèque qui encapsule les différents appels requis pour les différents navigateurs
Il y avait un commentaire disant que IE accepte maintenant screenX et screenY. Alors maintenant, sa croix navigateur compatible. 🙂

OriginalL'auteur Said Bahadır Kaya | 2013-02-26

  1. 10

    Si vous êtes d'accord avec l'utilisation de fixed positionnement au lieu de absolute, vous pouvez utiliser quelque chose comme ce qui suit:

    jQuery.fn.center = function ()
{
    this.css("position","fixed");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

$('#myDiv').center();
$(window).resize(function(){
   $('#myDiv').center();
});

    Démo: http://jsfiddle.net/GoranMottram/D4BwA/1/

    cela a réglé mon problème, merci!

    OriginalL'auteur Goran Mottram

  2. 1

    cela fonctionne..prendre cette plongée comme #sample

    donner sa feuille de style css comme

    #sample{
margin-left:auto;
margin-right:auto;
width:200px;//your wish
}

    pense que cela fonctionne..

    Si vous lisez attentivement, la question est sur le centrage VERTICAL, et vous proposez HORIZONTALE de centrage.
    et ne fonctionne pas avec les éléments fixes

    OriginalL'auteur sasi

  3. 0

    ESSAYEZ CECI:

    var width=$("#div").css("width");
var half=width/2;
$("#div").css("marginLeft","-"+half+"px");

    Changer #div avec le sélecteur.

    Une fois de plus... Si vous lisez attentivement, la question est sur le centrage VERTICAL, et vous proposez HORIZONTALE de centrage.

    OriginalL'auteur harikrishnan.n0077