CSS : Centrer un bloc horizontalement et verticalement sur une page

Mise à jour : Internet Explorer explorer peut poser un problème avec le positionnement absolu. Correction en fin d’article.

Puisqu’on m’a posé la question ce soir sur Twitter, voici une petite astuce toute simple de positionnement CSS. Le but est de centrer un bloc sur une page web, horizontalement et verticalement.

Ce n’est pas utile dans tous les cas de figure mais pour ce qui était envisagé, c’est le plus facile. C’est notamment idéal pour une page n’impliquant pas de défilement.

L’astuce consiste à mettre le contenu dans un <div>, de lui donner des dimensions fixes et de le positionner. L’alignement et le centrage est valable et respecté quelle que soit la dimension de la fenêtre du navigateur, pour peu que celle-ci soit plus grande que le bloc considéré.

Le code CSS correspondant est le suivant :

#wrapper {
    position:absolute;
    width:600px;
    left:50%;
    margin-left:-300px;
    height:500px;
    top:50%;
    margin-top:-250px;
}

Peu importe l’ordre dans lequel vous écrivez vos lignes de code, ici j’ai choisi cette structure pour la mettre en évidence. Le CSS parle de lui-même tellement c’est simple : je crée un bloc de 600×500 et je définis ses marges par rapport au positionnement absolu sur la page.

Internet Explorer 6 est capricieux avec le positionnement absolu. Selon votre design, il se peut que vous deviez déclarer pour body soit width soit height ou les deux en 100%.

body { width:100%; height:100%; }
36445be5adf85af224eae1917e90f48b/