Comment conserver une div au centre de la page?

Question

J'utilise jQuery pour créer une "boîte de dialogue" qui devrait apparaître en haut de la page et au centre de la page (verticalement et horizontalement). Comment dois-je m'y rendre rester au centre de la page (même lorsque l'utilisateur redimensionne ou fait défiler?)

Answer 1

J'utiliseraient

position: fixed; 
top: 50%; 
left: 50%; 
margin-left: -(dialogwidth/2); 
margin-top: -(dialogheight/2); 

mais avec cette solution et un navigateur fenêtre de taille inférieure Dans votre boîte de dialogue, certaines parties de la boîte de dialogue seront inaccessibles en haut et à gauche, car elles sont en dehors de la fenêtre. Vous devez donc décider si cela convient à la taille de votre boîte de dialogue.

(CSS ne sait pas comment calculer, encore. Ainsi, le peu de mathématiques là-bas doit être fait par vous, en ce moment. Par conséquent, votre dialogue doit être une taille fixe que vous devez savoir.)

Edit:

Oh oui, si vous voulez servir votre boîte de dialogue pour le IE6 aussi, vous devriez faire quelque chose comme ceci:

#dialog { position: absolute; } 
#dialog[id] { position: fixed; } 

Depuis IE6 n'est pas capable de positions fixes et pas non plus capable de attribut-sélecteurs, l'IE6 sera le seul qui a la position définie à l'absolu. (Cela n'affectera que le comportement de défilement: absolu reste sur sa place dans la page et fixe reste à sa place dans le navigateur.Le reste est similaire.)

Answer 2

Pour mettre un div horizontalement au milieu, je mets toujours la marge: 0 auto. Mais ça ne peut pas être un élément flottant et dans IE j'ai toujours eu besoin de mettre un div autour de lui et de lui donner la propriété text-align: center, de sorte que le div intérieur soit centré horizontalement.

Answer 3

Si vous connaissez des dimensions de décalage de l'élément (largeur/hauteur + rembourrage), vous pouvez utiliser ce CSS:

elementContainerSelector { 
    position: fixed; /* You'll of course need to handle browsers that don't support fixed positioning */ 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

elementSelector { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -[half of offset height]px 0 0 -[half of offset width]px; 
} 

réponse de Hurix fonctionne aussi, et garder à l'esprit les mises en garde dans cette réponse aussi bien.

Answer 4

Découvrez Infinity Web Design's pièce à ce sujet.

#mydiv { 
    background-color:#F3F3F3; 
    border:1px solid #CCCCCC; 
    height:18em; 
    left:50%; 
    margin-left:-15em; 
    margin-top:-9em; 
    position:absolute; 
    top:50%; 
    width:30em; 
} 

Ceci est le CSS qu'ils utilisent, et je l'ai testé dans plusieurs navigateurs.

Vous remarquerez que la marge gauche est négative sur la moitié de la largeur et la marge supérieure est négative sur la moitié de la hauteur. Cela prend soin du centrage, plus ou moins, en le positionnant absolument à 50% en haut et à gauche.

Answer 5

Conserver la marge gauche: auto et marge droite: auto