On a tous déjà appliqué un text-align: center sur un paragraphe entier pour « faire joli », avant de réaliser que le texte devenait pénible à lire sur mobile. Le centrage de texte en CSS ne se résume pas à une propriété unique : c’est un choix de mise en page qui engage la lisibilité, l’accessibilité et la cohérence visuelle du contenu.
Quand le centrage de texte CSS pose un problème de lisibilité
La plupart des tutoriels commencent par la syntaxe. On va commencer par le cas où il ne faut pas centrer.
Des guides de design web utilisés dans l’administration américaine le formulent sans détour : « Do not center text: centered text is hard to read. Imagine having to read a book where all the text was centered. » Cette recommandation s’appuie sur des travaux du Poynter Institute et de Nielsen Norman Group, qui montrent que la lecture en ligne est plus efficace avec un texte aligné à gauche.
Le problème est mécanique. Quand le texte est centré, le point de départ de chaque ligne change. L’œil doit recalculer sa position à chaque retour, ce qui ralentit la lecture et fatigue plus vite sur les contenus longs. Sur mobile, où les lignes sont courtes, l’effet est amplifié.
En pratique, on réserve le centrage CSS aux éléments courts et isolés :
- Titres principaux (
h1,h2) quand ils tiennent sur une ou deux lignes maximum - Légendes d’images ou citations courtes mises en avant visuellement
- Boutons d’appel à l’action et textes de navigation
- Mentions légales ou crédits en pied de page
Dès qu’un paragraphe dépasse trois ou quatre lignes, revenir à text-align: left améliore la lisibilité sans discussion. C’est la règle de base avant même de parler de code.
Centrer du texte CSS avec text-align : syntaxe et pièges courants
La propriété text-align s’applique à un élément de type bloc (un div, un p, un section) et agit sur tout le contenu en ligne qu’il contient : texte, images en ligne, span, liens.
La base qui fonctionne partout
Un simple text-align: center; sur le conteneur suffit pour centrer horizontalement le texte et les éléments inline à l’intérieur. On l’écrit sur le parent, pas sur l’élément texte lui-même.
Piège fréquent : appliquer text-align: center sur un élément bloc enfant (un div dans un div) en espérant centrer ce bloc. Ça ne marche pas. text-align ne déplace que le contenu en ligne, pas les blocs. Pour centrer un bloc dans son parent, on passe par margin: 0 auto avec une largeur définie.
Héritage et effets de bord
La propriété text-align est héritée. Si on la place sur le body, tous les éléments enfants héritent du centrage. On se retrouve alors avec des listes, des formulaires et des paragraphes entiers centrés sans l’avoir voulu.
La parade : appliquer le centrage uniquement sur les classes qui en ont besoin, et remettre explicitement text-align: left sur les conteneurs de texte courant. Ça évite de passer une heure à comprendre pourquoi un formulaire a un alignement bizarre.
Centrage vertical et horizontal CSS avec Flexbox
Quand on veut centrer un bloc de texte à la fois horizontalement et verticalement dans un conteneur (une section hero, une card, une modale), text-align ne suffit plus. Flexbox règle le problème en trois lignes.
On applique sur le conteneur parent : display: flex; justify-content: center; align-items: center;. Le contenu se positionne au centre des deux axes. Flexbox centre le bloc entier, pas seulement le texte en ligne, ce qui change fondamentalement le comportement par rapport à text-align.
Combiner Flexbox et text-align
Les deux ne s’excluent pas. Flexbox positionne le conteneur dans l’espace disponible. text-align: center aligne le texte à l’intérieur de ce conteneur. Sur une card de témoignage client, par exemple, on centre la card avec Flexbox et le texte du paragraphe avec text-align.
Si on oublie le text-align, le texte reste aligné à gauche à l’intérieur du bloc centré. Ce n’est pas un bug, c’est la logique CSS : chaque propriété agit à son niveau dans la hiérarchie du document.
Accessibilité et centrage CSS : les contraintes WCAG à connaître
WCAG 2.2 n’interdit pas formellement le centrage de texte. En revanche, le critère 1.4.12 (Text Spacing) impose que le contenu reste lisible et fonctionnel quand l’utilisateur modifie l’espacement des lignes, des mots et des lettres.
Un texte centré dans un conteneur à largeur fixe, sans gestion du débordement, casse souvent quand ces réglages sont appliqués. Les mots se chevauchent ou sortent du cadre visible. Pour rester conforme :
- Utiliser des unités relatives (
em,rem,%) plutôt que des pixels fixes pour la largeur des conteneurs de texte centré - Tester le rendu avec les paramètres d’espacement WCAG 1.4.12 (line-height à 1.5, espacement des mots à 0.16 em minimum)
- Limiter la largeur maximale des blocs de texte centré avec
max-widthpour éviter les lignes trop longues sur grand écran
Dans certains contextes institutionnels britanniques et américains, le centrage du texte courant est classifié comme non conforme aux standards internes d’accessibilité. Les retours varient sur ce point selon les référentiels nationaux, mais la tendance est claire.
Choisir la bonne méthode de centrage CSS selon le contexte
text-align: center reste le bon choix pour les éléments en ligne courts : titres, légendes, boutons. Pour centrer un bloc dans la page, margin: 0 auto avec une largeur explicite fait le travail sans surprise. Pour un centrage sur les deux axes dans un conteneur, Flexbox est la méthode la plus fiable et la plus lisible dans le code.
Grid offre une alternative avec place-items: center, mais on l’utilise surtout quand la mise en page globale repose déjà sur CSS Grid. Ajouter Grid uniquement pour centrer un élément alourdit le code sans gain réel.
Le réflexe à garder : chaque fois qu’on centre du texte CSS, se demander si le contenu dépasse deux lignes sur l’écran le plus étroit ciblé. Si oui, l’alignement à gauche servira mieux le lecteur que le centrage.
