Initiation au centrage CSS

• Profil : Expert
• Thème : Mise en page
• Technologie : CSS
• Auteur : Laurent Denis
• Mise à jour : 21/03/2003

En bref

Les différentes méthodes de centrage d'un contenu HTML.

Le centrage d'une boîte CSS repose sur l'utilisation de ses propriétés de marges latérales. La technique et le résultat obtenu dépendent cependant du comportement attendu de la boîte : elle peut être de largeur variable selon son conteneur, ou de largeur fixe.

Centrage d'une boîte élastique par des marges spécifiées.

Une boîte élastique aura une largeur variable en fonction de celle de son conteneur (fenêtre du navigateur, conteneur…).

La boîte sera centrée en la dotant de marges latérales de largeurs identiques :

• spécifiées en pixels si leur largeur doit être constante : .centre { margin-left: 50px; margin-right: 50px; } ;
• spécifiées en pourcentages si leur largeur doit être également proportionnelle à celle du conteneur : .centre { margin-left: 15%; margin-right: 15%; }.

Le résultat peut être observé dans l'exemple 1.

Les marges proportionnelles sont préférables aux marges en pixels, car elles s'adaptent mieux à un affichage de taille réduite : les marges diminuent avec la largeur d'affichage.

Centrage d'une boîte élastique par des marges calculées.

La boîte sera centrée simplement en spécifiant la valeur auto; pour ses marges latérales.

Cette solution très élégante… échoue dans IE Windows. Fort heureusement, il est possible de tirer parti d'une application impropre de la propriété text-align aux éléments de type bloc par MSIE Windows : il suffit de spécifier text-align: center pour le conteneur, et de rétablir text-align: left; pour la boîte elle-même.

.conteneur {
  text-align: center;
}
.centre {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  text-align: left;
}
    

Le résultat peut être observé dans l'exemple 2.

Cette solution est équivalente à celle des marges proportionnelles dans un affichage de taille réduite.

Centrage d'une boîte rigide.

Largeur de boîte en pixels

Une boîte rigide aura une largeur spécifiée en pixels, constante quelque-soit celle de son conteneur (fenêtre du navigateur, conteneur…). Elle sera centrée également en spécifiant la valeur auto; pour ses marges latérales

.conteneur {
  text-align: center;
}
.centre {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  text-align: left;
}
      

Le résultat peut être observé dans l'exemple 3.

Cette solution n'est pas à recommander, car elle entraîne un scroll horizontal ou un débordement dans un affichage de largeur réduite…

Largeur de boîte en em

La largeur de la boîte peut également être spéficiée en unité em, pour tenir compte de la taille de caractère propre à l'utilisateur :

.conteneur {
  text-align: center;
}
.centre {
  margin-left: auto;
  margin-right: auto;
  width: 20em;;
  text-align: left;
}
      

Le résultat peut être observé dans l'exemple 4.

Si vous modifiez dans Mozilla ou MSIE la taille d'affichage des caractères, la taille de la boîte augmentera en conséquence…

Cette solution n'est à recommander que pour des boîtes de petite largeur, puisqu'elle entraîne également un scroll horizontal ou un débordement dans un affichage de largeur réduite…

Variante : les marges négatives

Enfin, signalons une dernière méthode de centrage proposée par BlueRobot : le centrage par des marges négatives.

• la boîte est tout d'abord placée en position relative (ou absolue), sa marge gauche étant alignée à la moitié de la largeur de la zone d'affichage ;
• puis elle est dotée de marges latérales négatives égales à la moitié de sa largeur propre.

 
.centre {
  position: relative; /*ou absolute */
  left: 50%;
  width: 400px;
  margin-left: -200px;
}
      

Le résultat peut être observé dans l'exemple 5.