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

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

La balise <center> était utilisée pour centrer horizontalement du texte, des images ou des tableaux dans une page web. Reconnue par tous les navigateurs historiques, elle a longtemps été un outil incontournable pour la mise en page HTML.

Cependant, depuis HTML 4.01, cette balise est officiellement dépréciée et totalement absente de la spécification HTML5. Les navigateurs modernes peuvent encore la rendre, mais son usage est fortement déconseillé dans tout projet web professionnel ou conforme aux standards du W3C.

⚠️ Mise à jour 2026 :

La balise <center> n'existe plus dans HTML5 ni HTML Living Standard. Son rendu dépend uniquement de la compatibilité ascendante des navigateurs. Pour un code valide, maintenable et accessible, utilisez exclusivement 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 à l'élément parent (le conteneur). Elle peut contenir d'autres balises HTML imbriquées.

Voici un exemple illustrant son usage historique pour centrer du texte simple 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 systématiquement 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, les développeurs web professionnels utilisent exclusivement le CSS pour centrer des éléments. Voici les trois techniques CSS recommandées selon le type d'élément à centrer :

1. Centrage de texte avec text-align: center

La méthode la plus simple 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, on utilise des marges automatiques :

<!-- 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)

La technique Flexbox CSS est la plus puissante et la plus polyvalente pour centrer des éléments, aussi bien horizontalement que verticalement :

<!-- 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

Le CSS Grid offre une syntaxe encore plus concise pour le centrage complet en une seule propriété :

<!-- 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> supporte 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 11 mars 2026