La balise HTML <center>
La balise <center> centre le contenu horizontalement. Son équivalent CSS est la propriété text-align. Voir des exemples.
La balise HTML <center> est obsolète et ne doit pas être utilisée dans les nouvelles pages. C'était un élément de type bloc qui centrait horizontalement tout ce qu'il contenait, mais elle a été supprimée de la norme HTML et n'est plus prise en charge dans HTML5. Les navigateurs modernes peuvent encore la restituer pour des raisons de compatibilité ascendante, mais son comportement n'est pas garanti et elle ne passera pas la validation.
Cette page explique ce que faisait <center> et, surtout, présente les techniques CSS qui la remplacent : text-align: center pour le contenu en ligne, margin: 0 auto pour les éléments de type bloc, et Flexbox pour centrer à la fois horizontalement et verticalement.
La balise <center> est une balise HTML dépréciée et n'est pas prise en charge dans HTML5. La présentation appartient au CSS, pas au balisage HTML. Utilisez plutôt les techniques CSS ci-dessous.
La différence conceptuelle : centrage en ligne vs. centrage de bloc
Avant de choisir une technique, déterminez ce que vous centrez. C'est la source de confusion la plus fréquente.
- Centrer du contenu en ligne (texte, images, éléments en ligne) à l'intérieur d'un conteneur : utilisez
text-align: centersur le conteneur. Le conteneur conserve toute sa largeur ; seul son contenu se déplace vers le milieu. - Centrer un élément de type bloc (un
<div>, un<section>, une carte) dans son parent : utilisezmargin: 0 autosur le bloc lui-même. Le bloc doit avoir une largeur inférieure à celle de son parent, sinon il occupe déjà toute la ligne et il n'y a rien à centrer.
En résumé : text-align centre les éléments à l'intérieur d'une boîte ; margin: auto centre la boîte elle-même.
Centrer du contenu en ligne avec text-align
Appliquez text-align: center à l'élément parent. Les dimensions de l'élément ne changent pas — seul le contenu à l'intérieur est centré.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This text is aligned to the left.</p>
<p style="text-align:center">And this one is placed in the center.</p>
</body>
</html>C'est le remplacement direct de <center> lorsque vous souhaitez simplement centrer du texte.
Centrer un élément de type bloc avec margin: 0 auto
Pour centrer horizontalement un élément de type bloc dans son parent, donnez-lui une width et définissez ses marges gauche et droite sur auto. Le navigateur répartit alors l'espace horizontal restant de manière égale des deux côtés.
margin: 0 auto est un raccourci pour « 0 en haut/bas, auto à gauche/droite ». En pratique, cela définit les mêmes valeurs pour margin-left et margin-right à auto.
La width est obligatoire. Un élément de type bloc sans largeur définie occupe 100 % de son parent par défaut, ne laissant aucun espace disponible pour que les marges auto se distribuent — rien ne semble donc bouger. Une fois que l'élément est plus étroit que son parent, les marges auto le centrent.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="margin:0 auto; width:50%; background:#eee;">
This block is centered horizontally.
</div>
</body>
</html>Notez que margin: auto ne centre qu'horizontalement — il ne centre pas un bloc verticalement.
Centrer dans les deux axes avec Flexbox
Lorsque vous devez centrer du contenu horizontalement et verticalement en même temps, Flexbox est le choix moderne et fiable. Transformez le conteneur en conteneur flex, puis utilisez justify-content: center pour l'axe horizontal et align-items: center pour l'axe vertical.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="display:flex; justify-content:center; align-items:center;
height:200px; border:1px solid #ccc;">
<p>This box is centered both horizontally and vertically.</p>
</div>
</body>
</html>Ici, display:flex transforme le <div> en conteneur flex, justify-content:center centre ses enfants le long de l'axe principal (horizontal), et align-items:center les centre le long de l'axe transversal (vertical). La height est définie pour qu'il y ait de l'espace vertical dans lequel centrer.
Pour une présentation complète de ces propriétés et du reste du modèle de mise en page, consultez The Ultimate Guide to Flexbox.
À quoi ressemblait l'ancienne balise <center>
À titre de référence uniquement — n'utilisez pas ceci dans du nouveau code. La balise <center> s'utilisait en paires et centrait tout ce qui se trouvait entre les balises ouvrante et fermante :
<p>This text is aligned to the left.</p>
<center>And this one is placed in the center.</center>Le balisage moderne équivalent est simplement <p style="text-align:center">…</p>, comme indiqué ci-dessus.