web-dev-qa-db-fra.com

Positionner au centre de la zone visible

Je suis en train de créer une fenêtre contextuelle de style lightbox pour une inscription à une liste de diffusion, mais je souhaite que cette dernière se positionne au centre de la page visible, et pas uniquement au centre de l'ensemble du document. si l'utilisateur fait défiler l'écran jusqu'en bas et clique pour s'inscrire, je souhaite qu'il apparaisse au centre de l'écran.

Je suppose que jQuery/JS sera la meilleure solution pour cela; voici mon code CSS actuel qui fonctionne assez bien, mais la div doit être enfoncée dynamiquement dans l'espace visible pour les écrans plus petits. 

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

Tu étais proche! Cela peut être fait avec CSS seul:

Utilisez position: fixed au lieu de position: absolute.

Fixé fait référence à la fenêtre d'affichage, tandis qu'absolu fait référence au document. Lire tout de qui le concerne!

38
Madara Uchiha
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";
8
Lahiru Ashan

Je sais que cela ne résoudra pas la question, mais c’est une bonne référence et un point de départ: Comment positionner un div au 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

5
Adrian P.

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});
2
André Alçada Padez

Bien que la réponse acceptée soit préférable, si vous ne pouvez pas définir le divs position sur fixed, vous pouvez utiliser cette solution JavaScript pure.

var myElement = document.getElementById('my-div'),
    pageWidth = window.innerWidth,
    pageHeight = window.innerHeight,
    myElementWidth = myElement.offsetWidth,
    myElementHeight = myElement.offsetHeight;

myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + "px";
myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + "px";

 

JSFiddle

Ou une version plus condensée:

var w = window,
    elem = document.getElementById('my-div');

elem.style.top = (w.innerHeight/2) - (elem.offsetHeight/2) + 'px';
elem.style.left = (w.innerWidth/2) - (elem.offsetWidth/2) + 'px';

Cette réponse est une version JavaScript de Vanilla de Lahiru Ashan answer.

1
Jessica