Centrer des lignes de texte
Le plus fréquent (et donc) le plus facile des types de centrage
est de centrer des lignes de texte dans un paragraphe ou dans un
titre. CSS possède la propriété 'text-align' pour cela:
P { text-align: center }
H2 { text-align: center }
Chaque ligne d'un P ou d'un H2 est centrée entre les marges,
comme ceci:
Les lignes à l'intérieur de ce
paragraphe sont toutes centrées entre les marges du paragraphe,
grâce à la valeur 'center' de la propriété CSS 'text-align'.
Centrer un bloc ou une image
Quelquefois, ce n'est pas le texte qui doit être centré, mais le
bloc dans son ensemble qui doit l'être. Ou bien, exprimé
différemment: on veut que les marges droite et gauche soient
égales. La manière de faire cela est de fixer les marges à 'auto'.
C'est normalement utilisé avec un bloc de largeur fixe, car si le
bloc est lui-même flexible, cela prendra toute la largeur
disponible. Voici un exemple:
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}
...
<P class="blocktext">Cet étroit...
Cet étroit bloc de texte est centré. Notez que
les lignes à l'intérieur du bloc ne sont pas centrées (elles sont
alignées à gauche), contrairement à l'exemple précédent.
C'est également la façon de centrer une image: placez-la dans un
bloc spécifique et appliquez lui la propriété margin. Par exemple:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
L'image suivante est centrée: 
Centrer verticalement
CSS niveau 2 ne possède pas de propriété pour centrer des objets
verticalement. Il y en aura probablement une en CSS niveau 3. Mais
vous pouvez toutefois centrer des blocs verticalement en CSS2 en
combinant quelques propriétés. L'astuce est de spécifier que le
bloc extérieur doit être formaté comme un tableau, parce que les
contenus d'une cellule d'un tableau peuvent être centrés
verticalement.
L'exemple ci-dessous montre comment centrer un paragraphe à
l'intérieur d'un bloc qui possède une certaine hauteur donnée. Un
autre exemple montre un paragraphe
centré verticalement dans la fenêtre du navigateur, parce qu'il est
à l'intérieur d'un bloc qui est positionné de manière absolue et
d'égale hauteur que la fenêtre.
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>Ce court paragraphe...
</DIV>
Ce court paragraphe est centré verticalement.
