Centrer un objet dans la page en CSS

À la demande d'un client, j'ai eu à placer sur une page HTML une boîte de contenu centrée horizontalement et verticalement, en plein centre de la page. Pour y arriver, j'ai utilisé le code CSS ci-dessous.

À supposer que l'élément à centrer est de forme carrée et mesure 200 x 200 pixels :

#box {
  width:200px;
  height:200px;
  background-color:black;
}

Il ne reste qu'à définir la classe centered :

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

Et appliquer la classe sur le conteneur à centrer :

<div id="box" class="centered"></div>

Notez que les marges de gauche et du haut sont présentes et divisent par deux la taille réelle de l'objet. Autrement, ce sera le coin supérieur gauche qui sera centré à l'écran.

Testé initialement sur Firefox 3, IE 7 et Chrome 1.
Mise à jour 2009-04-17 : Testé fonctionnel pour la plupart des fureteurs sur browsershots.org.