réglage de la position div

Question

Comment puis-je ajuster div avec le centre exact de l'écran à n'importe quelle résolution avec la position: absolue.

Answer 1

Si la div a une largeur et une hauteur connue, vous pouvez utiliser la marge négative:

div { 
    position: absolute; 
    width: 800px; 
    height: 500px; 
    left: 50%; 
    top: 50%; 
    margin-top: -250px; 
    margin-left: -400px; 
} 

Notez les marges négatives sont la moitié de la largeur et la hauteur.

Si la taille de div n'est pas connue ou est fluide, vous devez utiliser JavaScript. Voici comment le faire fonctionner en utilisant jQuery:

$(function() { 
    $(window).resize(function() { 
     $('div.something').css({ 
      left: $(window).width() - ($(this).width()/2), 
      top: $(window).height() - ($(this).height()/2) 
     }); 
    }); 
    $(window).resize(); 
}); 

Answer 2

Le bit suivant du script vous obtenir la hauteur et la largeur de l'espace visable dans la fenêtre.

<script type="text/javascript"> 
     <!-- 
      function pageWidth() { 
       return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null; 
      } 
      function pageHeight() { 
       return window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null; 
      } 
      function posLeft() { 
       return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0; 
      } 
      function posTop() { 
       return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0; 
      } 
      function posRight() { 
       return posLeft() + pageWidth(); 
      } function posBottom() { 
       return posTop() + pageHeight(); 
      } 

      pageWidth() 
      pageHeight() 
     //--> 
    </script> 

Un peu de mathématiques simples vous obtiendrez les xy coordonnées du centre de l'écran x = largeur/2 y = Hauteur/2

la position de haut à y + (DivHeight/2), et la position gauche de votre plongée à X- (DivWidth/2)

Answer 3

CSS Dead Center

selector { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
}