Centrage vertical et horizontal d'une boite

EXEMPLE

Cette boite est centrée verticalement et horizontalement

CODE SOURCE CSS ET HTML

<html>
<head>
<style type="text/css">

.boite-centre { /* exemple de boite centrée */
width:250px ; /* largeur de la boite */
height:200px ; /* hauteur de la boite */
background-color:#CCCCCC ; /* couleur du fond de la boite */
border:solid black 2px; /* forme, couleur et épaisseur de la bordure de la boite */
position:absolute ; /* envoie la boite à un endroit précis de l'écran */
top:50% ; /* la boite débute à 50% du haut du parent (ici la page) */
left:50% ; /* la boite débute à 50% de la gauche du parent (ici la page) */
margin-left:-125px ; /* on recule la boite vers la gauche de 125 pixels */
margin-top:-100px} /* on recule la boite vers le haut de 100 pixels */

</style>

<head>

<body>

<div class="boite-centre"></div> <!-- la boite (ici, elle est vide) -->

</body>
</html>

Pour tester ce script

 

COMMENTAIRES

Cet exemple de centrage est basé sur les marges négatives. En effet la fonctions de centrage verticales des CSS2 (vertical-align) ne marche que dans un tableau. Quand au centrage horizontal, il est géré un peu bizarrement par Internet Explorer (voir exemple suivant). On doit donc utiliser une astuce.

Cette astuce consiste à placer le début de la boite à 50% du haut et à 50% de la gauche. C'est le coin haut et gauche de la boite qui est au centre de l'écran, pas la boite elle-même, qui se trouve décalée vers le bas et la droite.

Pour la recentrer, on utilise donc une marge négative vers le haut (de la moitié de la hauteur en pixel de la boite), et une marge négative vers la gauche (de la moitié de la largeur en pixel de la boite).

L'astuce marche très bien, mais avec un inconvénient : la boite doit être en pixel, et la marge négative aussi. Si la boite est exprimée en %, le système des marges négatives ne fonctionne plus.

Si on veut centrer verticalement une boite2 dans une boite1, on reprend exactement le style ".boite", et on le met dans ".boite2" (en mettant boite2 plus petite que boite1, bien sur, sinon elles se superposent). Seule différence, le position:absolute devient un position:relative.

Le centrage vertical ne marche évidement pas dans Netscape 4.