Le code HTML

Il est on ne peut plus simple :

<div id="centre">
   <p>Je suis un bloque toujours centr&eacute;! Essayez de redimensionner la fen&ecirc;tre!</p>
</div>

Rien de très compliqué, un simple bloque contenant un peu de texte.

Le code CSS

On commence d'abord avec un hack pour Internet Explorer, rien de bien surprenant finalement.

html, body
{
   height:100%;
}

Ensuite nous allons pouvoir modifier l'apparence du bloque que nous avons créé plus haut :

#centre
{
   /* On lui donne des dimensions */
   width: 200px;
   height: 200px;
 
   /* On centre le texte qu'il contient*/
   text-align: center;
 
   /* Une petite bordure noire */
   border: 1px solid #000;
 
   /* Une couleur de fond bleue */
   background-color: #5fa3ff;
 
   /* Et enfin du texte en blanc */
   color: #fff;
}

Rien de très utile finalement puisque notre bloque restera toujours placé en haut et à gauche de la page avec ce seul code CSS. Nous allons donc devoir y ajouter quelques propriétés.

Premièrement nous définirons sont positionnement à absolute, car il est ensuite possible d'utiliser les propriétés left et top avec comme valeurs 50%. Cependant, même après cela, notre bloque ne sera pas vraiment centré. En effet, seul le coin supérieur gauche du bloque sera centré sur la page. Pour remédier à cela, nous allons utiliser des marges négatives qui feront "reculer" le bloque de la moitié de sa hauteur et de sa largeur. Il sera ainsi parfaitement centré horizontalement et verticalement.

Ce qui nous donnera donc le code CSS suivant :

#centre
{
   /* Positionnement absolu */
   position:absolute;
 
   /* Positionnement du coin supérieur gauche au centre */
   left:50%;
   top:50%;
 
   /* On donne des dimensions au bloque */
   width: 200px;
   height: 200px;
 
   /* On le fait "reculer" la la moitié de ces dimensions */
   margin-left:-100px;
   margin-top:-100px;
 
   /* Les mises en formes */
   text-align: center;
   border: 1px solid #000;
   background-color: #5fa3ff;
   color: #fff;
}

Et le tour est joué : vous obtiendrez un bloque parfaitement centré.

Un petit mot sur la technique consistant à utiliser un tableau de hauteur 100% pour le centrage vertical : bannissez la! Ce n'est absolument pas la place d'un tableau.

Nous allons terminer cette article sur un exemple d'utilisation de cette technique. Je vous invite d'ailleurs à redimensionner votre fenêtre pour admirer le centrage automatique.