Position div au centre de la zone visible

Que je suis en train de faire une lightbox style pop-up pour une liste de diffusion inscrire, mais je veux que le menu jusqu'à la position au centre de la page visible, pas seulement le centre de tout le document; si l'utilisateur fait défiler vers le bas de la page et clique sur enregistrer, je veux qu'il apparaisse dans le centre de l'écran.

Je suis en supposant que jQuery/JS sera la meilleure manière de faire pour cela; voici mon code CSS qui fonctionne assez bien, mais la div doit être poussé vers le bas dans l'espace visible de façon dynamique pour les petits écrans.

.my-div{
    width:960px;
    height:540px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-480px;
    margin-top:-270px;
    z-index:60;
    display:none;
}

source d'informationauteur mmmoustache | 2012-01-30

  1. 31

    Proximité! Il peut être fait avec CSS seul:

    Utilisation position: fixed au lieu de position: absolute.

    Fixe se réfère à la fenêtre d'affichage, tandis que l'absolu se réfère au document. Lire tout ça!

  2. 8
    var w = $(window).width();
var h = $(window).height();
var d = document.getElementById('my-div');
var divW = $(d).width();
var divH = $(d).height();

d.style.position="absolute";
d.style.top = (h/2)-(divH/2)+"px";
d.style.left = (w/2)-(divW/2)+"px";
  3. 5

    Je sais que cela ne va pas résoudre la question, mais il est bon de référence et un point de départ: Comment positionner une div dans le centre de la fenêtre du navigateur

    Position Div Exactement au centre de l'écran

    <!DOCTYPE html> 
  <html > 
    <head> 
      <style type="text/css"> 
        .exactCenter { 
           width:200px; 
           height:200px; 
           position: fixed; 
           background-color: #00FF00; 
           top: 50%; 
           left: 50%; 
           margin-top: -100px; 
           margin-left: -100px; 
        } 
      </style> 
    </head> 
    <body> 
      <div class="exactCenter"> </div> 
    </body> 
  </html>

    JSFiddle ici
    et ici

  4. 2

    avec jQuery:

    var left = ($(window).width() - $(.my-div).width()) / 2;
var top = ($(window).height() - $(.my-div).height()) / 2;
$('.my-div').position({top: top + 'px', left: left + 'px});