Centrer une balise <i> (ou n’importe quel élément en ligne) à l’intérieur d’une <div> sur les deux axes revient à résoudre deux problèmes distincts : l’alignement horizontal et l’alignement vertical. La difficulté vient du fait qu’un élément en ligne ne réagit pas aux mêmes propriétés qu’un bloc, et que le centrage vertical a longtemps manqué d’une solution native simple en CSS.
Pourquoi centrer un élément inline dans une div pose problème
Une balise <i> est un élément de type inline. Par défaut, elle ne prend que la largeur de son contenu et ne peut pas recevoir de marges verticales automatiques. Appliquer margin: auto sur un inline n’a aucun effet vertical.
Le conteneur <div>, lui, est un bloc. Sans hauteur explicite, il s’effondre sur son contenu. Le centrage vertical ne peut fonctionner que si le parent possède une hauteur définie (en pixels, en pourcentage, en vh, etc.).
Beaucoup de développeurs tentent text-align: center et considèrent le travail terminé. L’élément est centré horizontalement, mais reste collé en haut du conteneur. Le centrage n’est alors qu’à moitié résolu.
Centrer avec CSS Grid et place-items
La méthode la plus courte pour obtenir un centrage complet repose sur CSS Grid. Deux lignes suffisent sur le conteneur :
display: grid; place-items: center;
La propriété place-items est un raccourci qui combine align-items (axe vertical) et justify-items (axe horizontal). Appliquée avec la valeur center, elle place chaque enfant au centre exact de sa cellule de grille.
Voici le code complet :
<div class="wrapper"><i class="fa fa-star"></i></div>
.wrapper { display: grid; place-items: center; height: 300px; }
L’élément <i> se retrouve pile au milieu, quelle que soit sa taille. Cette approche est aujourd’hui présentée comme l’option la plus robuste pour centrer un seul élément sur les deux axes, car elle évite les pièges d’axe liés à Flexbox et garde l’élément dans le flux normal du document.
Différence entre place-items et place-content
place-items centre l’élément dans sa cellule, tandis que place-content centre le groupe de pistes (les colonnes et rangées elles-mêmes) dans le conteneur. Pour un seul enfant, le résultat visuel est identique. La distinction devient visible quand le grid contient plusieurs items ou des pistes de taille fixe.
Centrer un i dans une div avec Flexbox
Flexbox reste la méthode la plus répandue. Elle nécessite trois déclarations sur le parent :
display: flextransforme le conteneur en boîte flexible et fait de chaque enfant un flex item, même s’il est inline.justify-content: centercentre les enfants sur l’axe principal (horizontal par défaut).align-items: centercentre les enfants sur l’axe secondaire (vertical par défaut).
Le code :
.wrapper { display: flex; justify-content: center; align-items: center; height: 300px; }
La balise <i> est automatiquement promue en flex item. Plus besoin de la convertir en bloc ni d’ajouter quoi que ce soit dessus. Le piège courant est d’oublier la hauteur sur le conteneur : sans elle, la div s’adapte au contenu et le centrage vertical devient invisible.
Le mot-clé safe center pour éviter le rognage
Quand le contenu centré déborde du conteneur (texte très long, icône surdimensionnée), un centrage strict peut couper la partie haute ou gauche, la rendant inaccessible au scroll. Le mot-clé safe center résout ce cas : si l’élément déborde, l’alignement bascule automatiquement sur start au lieu de forcer le centrage. La syntaxe s’écrit justify-content: safe center ou align-items: safe center.
Position absolute pour centrer un élément : cas limité aux overlays
La technique historique utilise position: absolute combiné à top: 50%; left: 50%; transform: translate(-50%, -50%). Elle fonctionne, mais retire l’élément du flux normal. Les autres éléments du conteneur ne tiennent plus compte de sa présence.
Cette méthode reste pertinente dans un cas précis : les overlays, badges et éléments flottants qui doivent se superposer au contenu. Pour centrer un simple <i> dans sa div parente, Grid ou Flexbox sont plus adaptés parce qu’ils n’ont pas d’effet de bord sur le reste de la mise en page.
- Le parent doit avoir
position: relativepour servir de référentiel, sinon l’élément se positionne par rapport au viewport. transform: translate(-50%, -50%)compense le décalage initial, cartopetleftpositionnent le coin supérieur gauche de l’élément, pas son centre.- Le contenu qui suit dans le HTML ignore l’espace occupé par l’élément positionné en absolu, ce qui peut provoquer des chevauchements non voulus.
Récapitulatif : quelle méthode CSS choisir selon le contexte
| Méthode | Déclarations CSS | Cas d’usage adapté |
|---|---|---|
| Grid + place-items | 2 lignes | Un seul élément à centrer, solution la plus concise |
| Flexbox | 3 lignes | Centrage avec plusieurs enfants sur un axe |
| Position absolute + transform | 4-5 lignes | Overlays, badges, éléments hors flux |
Pour une icône Font Awesome, un SVG ou n’importe quel <i> seul dans sa div, Grid avec place-items: center reste le choix le plus direct. Deux lignes, aucun piège d’axe, aucun élément retiré du flux. La seule condition à ne pas oublier : donner une hauteur explicite au conteneur, faute de quoi le centrage vertical n’a tout simplement nulle part où s’exprimer.
