Cet article est vraiment ancien et mentionne encore Internet Explorer 5 à 7. Notez qu’à partir d’Internet Explorer 8 il est possible d’utiliser display:table et display:table-cell pour obtenir le même effet sans avoir à utiliser de tableau de mise en page.

Centrage horizontal

Pour centrer un bloc horizontalement dans une page ou dans son conteneur, la méthode la plus efficace est celle des marges automatiques. À partir du moment où le bloc a une largeur déterminée (propriété width avec toute autre valeur que auto), il peut recevoir pour ses marges latérales une valeur de auto. Les deux marges seront alors calculées automatiquement pour centrer le bloc.

Sur cette page, on a donné au bloc principal une largeur de 500px, et des marges latérales automatiques. Le code CSS utilisé est le suivant:

div#page {
    width: 500px;
    margin: 0 auto;
}

Comme vous le savez peut-être déjà, les marges automatiques ne sont pas compatibles avec les versions 5.01 et 5.5 d'Internet Explorer. Si on souhaite tout de même prendre en compte ces deux versions en voie de disparition, on pourra utiliser l'astuce suivante:

body {
    text-align: center;
}
div#page {
    width: 500px;
    margin: 0 auto;
    text-align: left;
}

On notera que si l'élément body n'est pas le parent direct de div#page, il peut être préférable de donner le text-align: center; à ce parent.

Voir un exemple de page avec central horizontal uniquement.

Centrage vertical

À l'heure actuelle, vu le support défaillant de display: table et display: table-cell par les navigateurs (essentiellement Internet Explorer 6 et 7), il n'existe pas de solution CSS réellement satisfaisante pour le centrage vertical d'un bloc.

C'est donc l'un des rares cas où l'on aura tout intérêt à utiliser un tableau de mise en forme. On utilisera un tableau (élément HTML table) sans éléments ou attributs d'accessibilité (conformément aux recommandations d'accessibilité pour les tableaux de mise en forme), et une cellule unique. Le code de notre tableau sera donc:

<table><tr><td>
    <!-- Ici le contenu de la page -->
</td></tr></table>

Rajoutons maintenant un bloc div dans la cellule unique de ce tableau, et quelques attributs id qui vont bien:

<table id="page-table"><tr><td id="page-td">
    <div id="global">
        <!-- Ici le contenu de la page -->
    </div><!-- #global -->
</td></tr></table>

Nous pouvons maintenant passer au code CSS. Nous avons deux objectifs principaux:

  1. nous assurer que la cellule de notre tableau de mise en forme prendra bien 100% de la largeur de la zone de visualisation du navigateur, et au moins 100% de sa hauteur;
  2. demander à ce que le contenu de la cellule soit bien centré verticalement

Le premier objectif nous oblige à donner une hauteur de 100% aux éléments html et body. Le tableau de mise en forme devra, pour sa part, avoir une hauteur et une largeur de 100%.

Le deuxième objectif est beaucoup plus simple: il suffit de placer un vertical-align: middle; dans le code CSS pour la cellule de notre tableau de mise en forme. Une note rapide: la propriété vertical-align n'aurait hélas pas le même effet sur un élément de type bloc autre qu'une cellule de tableau (par exemple sur une div)… si c'était le cas, on ne s'embêterait pas avec un tableau. ;)

Voici donc le code CSS complet:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#page-table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
#page-td {
    height: 100%;
    padding: 0;
    vertical-align: middle;
}
div#global {
    width: 500px;
    margin: 20px auto;
    text-align: left;
}

Vous pouvez visualiser le résultat sur la page du deuxième exemple.