Balise HTML <CENTER> — Centrage de texte et alternatives CSS

Balise HTML <center> : définition et usage historique

La balise <center> centrait horizontalement du texte, des images ou des tableaux dans une page web. Reconnue par tous les navigateurs de l'époque, elle a été pendant longtemps la solution rapide pour la mise en page HTML — avant que le CSS ne prenne le relais.

Depuis HTML 4.01, cette balise est officiellement dépréciée, et elle n'apparaît nulle part dans la spécification HTML5. Les navigateurs modernes peuvent encore l'afficher par rétrocompatibilité, mais l'utiliser dans un projet web actuel serait une erreur.

⚠️ Note 2026 :

La balise <center> n'existe plus dans HTML5 ni dans le HTML Living Standard. Son rendu repose uniquement sur la rétrocompatibilité des navigateurs — rien de garanti. Pour un code valide et maintenable, utilisez les propriétés CSS : text-align: center, margin: auto, display: flex; justify-content: center ou display: grid; place-items: center.

Fonctionnement de la balise <center>

La balise <center> est un élément de bloc avec une balise de fermeture obligatoire (</center>). Tous les éléments enfants — texte, images, tableaux — sont centrés par rapport à leur conteneur parent. Elle accepte d'autres balises HTML imbriquées.

Voici comment elle s'utilisait pour centrer du texte et un tableau :

<!-- Exemple historique : centrage avec la balise <center> -->
<!-- Texte simple centré -->
<center>Du texte centré horizontalement</center>
<!-- Tableau centré dans la page -->
<center>
  <table border="1" cellspacing="0" cellpadding="5">
    <tr>
      <td>Contenu du tableau centré</td>
    </tr>
  </table>
</center>

💡 Bonne pratique :

Remplacez la balise <center> par du CSS. Consultez notre guide sur le centrage avec CSS pour des exemples pratiques et compatibles HTML5.

Alternatives CSS modernes à la balise <center>

En 2026, on ne centre plus rien avec <center>. Le CSS offre quatre techniques selon ce que vous voulez centrer — texte, bloc, ou les deux à la fois.

1. Centrage de texte avec text-align: center

C'est la solution la plus directe pour centrer du contenu textuel inline à l'intérieur d'un bloc :

<!-- Remplacement CSS de <center> pour du texte -->
<p style="text-align: center;">Texte centré avec CSS</p>
<!-- Ou via une classe CSS réutilisable -->
<style>
  .centrer { text-align: center; }
</style>
<p class="centrer">Texte centré avec une classe CSS</p>

2. Centrage d'un bloc avec margin: auto

Pour centrer horizontalement un élément bloc (div, section, tableau) dans son conteneur, les marges automatiques font le travail. Une largeur définie est obligatoire — sans elle, le bloc s'étale sur toute la largeur disponible et il n'y a rien à centrer.

<!-- Centrage d'un bloc avec margin auto -->
<style>
  .bloc-centre {
    width: 60%;       /* largeur définie obligatoire */
    margin: 0 auto;   /* marges gauche et droite automatiques = centrage */
  }
</style>
<div class="bloc-centre">
  Contenu du bloc centré horizontalement
</div>

3. Centrage Flexbox (horizontal et vertical)

Flexbox est la technique la plus utilisée aujourd'hui pour centrer des éléments, que ce soit sur un axe ou les deux à la fois :

<!-- Centrage Flexbox : horizontal ET vertical -->
<style>
  .conteneur-flex {
    display: flex;              /* active le modèle flexbox */
    justify-content: center;    /* centrage horizontal (axe principal) */
    align-items: center;        /* centrage vertical (axe transversal) */
    height: 200px;              /* hauteur requise pour le centrage vertical */
  }
</style>
<div class="conteneur-flex">
  <p>Contenu centré horizontalement et verticalement</p>
</div>

4. Centrage CSS Grid avec place-items

CSS Grid va encore plus loin avec une syntaxe ultra-concise : une seule propriété remplace les deux lignes Flexbox :

<!-- Centrage CSS Grid ultra-concis -->
<style>
  .conteneur-grid {
    display: grid;          /* active CSS Grid */
    place-items: center;    /* raccourci pour align-items + justify-items */
    height: 200px;
  }
</style>
<div class="conteneur-grid">
  <p>Centré avec CSS Grid en une ligne !</p>
</div>

Attributs standards de la balise <center>

La colonne DTD indique dans quel profil HTML 4.01 / XHTML 1.0 l'attribut est autorisé :
S = Strict, T = Transitional, F = Frameset.

La balise <center> prend en charge les attributs standards HTML suivants :

Attributs d'événements JavaScript

La balise <center> prend en charge les attributs d'événements HTML suivants pour l'interaction JavaScript :

    Vous êtes ici : Balise center     Retour à la liste des balises HTML

Par carabde | Mis à jour le 15 mai 2026