Aligner en CSS, en 2026
Tout sur l'alignement en CSS par Temani Afif. Les choses ont beaucoup évolué avec Flexbox, CSS Grid et la spécification Box Alignment. Un article complet sur l'alignement, dans la continuité de ses excellents articles déjà traduits dans la Cascade.
Quoi ? Encore un article sur le centrage ?! M'enfin, il suffit d'utiliser <center> display: flex | grid, et <center> align-items: center. Non, c'est align-content… attendez… je crois que c'est justify-content. Bon, euh, on va utiliser margin: auto, ça marche à tous les coups, non ?
Malgré la multitude de ressources en ligne (même CSS-Tricks propose un guide complet ), il est facile de s'y perdre lorsqu'on essaie de centrer un élément (verticalement, horizontalement ou les deux). Vous trouverez sans doute une solution en faisant une recherche sur Google ou en testant différentes combinaisons. Mais comprenez-vous vraiment pourquoi le code choisi fonctionne ? Est-il adapté à votre cas d'utilisation ? Car tout dépend du contexte et ça nécessite une réflexion approfondie !
Dans cet article, nous allons explorer sous un nouvel angle le centrage en CSS, et nous espérons que vous aurez appris quelque chose de nouveau à la fin de votre lecture.
Je maîtrise déjà le centrage CSS. Faut-il vraiment que je lise cet article ?
Faites-moi confiance, nous allons explorer des astuces cachées et des fonctionnalités modernes que vous ne connaissez peut-être pas : le centrage sécurisé, text-box, le centrage dans le positionnement d’ancrage, etc.
Le centrage est-il toujours difficile ?
Nooon ! centrer un élément ce n'est pas difficile. Il y a de nombreuses façons de le faire, mais c'est une tâche simple qui ne nécessite généralement que deux ou trois lignes de code. OK, mais combien existe-t-il de façons de centrer un élément ? me direz-vous. Eh bien j'ai fait le compte et j'ai pu recenser 100 manières différentes de centrer un élément verticalement et horizontalement dans un conteneur .
Sérieux ? 100 façons ??! C'est dingue !
Oui, 100 ! C'est un nombre absurdement élevé pour une tâche qui devrait être simple, mais ce chiffre est trompeur. Si vous consultez la liste, vous constaterez que j'en ai marqué une soixantaine en rouge, pour indiquer qu'il s'agit de solutions de contournement peu élégantes et déconseillées. Il nous reste donc environ 30 approches valides. Parmi celles-ci, beaucoup sont fondamentalement identiques, seule la formulation diffère, et nous pouvons donc les considérer comme redondantes.
Au final, il existe moins de 15 (voire 10) façons « uniques » et « valides » de centrer un élément, mais énumérer les différents codes permettant de le faire était un exercice intéressant. Consultez la liste complète, vous pourriez bien apprendre quelque chose !
Voyons les choses du point de vue d'un débutant. Pour moi, qui écris du CSS jour et nuit depuis des années, c'est facile de dire « centrer, c'est pas compliqué », mais qu'en est-il d'un novice qui lit ceci et se retrouve face à toutes ces différentes façons de centrer des éléments ? Non, non, c'est loin d'être facile : align-items, align-content, justify-content, place-self, margin: auto, qu'est-ce c'est que ça ?!
C'est bien trop de propriétés pour une tâche que tout le monde prétend facile ! Bon, choisissons un code qui fonctionne et passons à autre chose. Après tout, si l'élément est centré, c'est bon, hein ? On va éviter d'en faire toute une histoire, sinon les fanatiques du CSS vont me tomber dessus.
Ne pensez pas comme ça ! Oui, centrer peut être difficile, et c'est normal. Cela ne signifie pas que vous êtes stupide. Cela signifie simplement que vous devez comprendre comment cela fonctionne.
Ne négligez pas l'étape cruciale de l'apprentissage (comme beaucoup le font) ; sinon, vous vous retrouverez à faire beaucoup de copier-coller sans vraiment comprendre ce qui se passe. Parfois ça marche, parfois non, et ça peut être très frustrant.
Apprenons à aligner avant de centrer
Le centrage n'est qu'un cas particulier d'alignement en CSS, et l'alignement est un domaine complexe. Il ne s'agit pas seulement de gauche, centre, droite, ou haut, centre, bas. C'est bien plus que cela. La bonne nouvelle, c'est que vous pouvez facilement l'apprendre. C'est pourquoi j'ai rédigé un article approfondi intitulé « Les fondamentaux de l'alignement en CSS ».
C'est probablement l'un de mes textes les plus longs, mais croyez-moi, il vaut vraiment la peine d'y consacrer du temps (et des efforts). J'y explique le fonctionnement de l'alignement dans toutes les méthodes de mise en page CSS. Ça commence par la compréhension de la théorie de l'alignement, qui comporte deux niveaux (« contenu » et « élément ») et deux axes (horizontal et vertical).
Identifier le « contenu » et l’« élément » dans chaque mise en page est essentiel pour comprendre le fonctionnement global. J’insiste sur « chaque mise en page » car supposer que le fonctionnement est identique partout est une erreur très fréquente.
Faites-vous une faveur et lisez cet article détaillé — vous me remercierez plus tard ! Et une fois que vous aurez compris le concept fondamental de l’alignement, le centrage deviendra un jeu d’enfant.
Quoi utiliser, Flexbox ou Grid ?
Je vois beaucoup de gens utiliser systématiquement la même méthode pour centrer un élément, quelle que soit la situation. Il y a l'équipe CSS Grid et l'équipe Flexbox. Même si les deux fonctionnent, je vous déconseille de procéder ainsi. N'oubliez pas que l'objectif est de comprendre et d'éviter les solutions de facilité du type « copier-coller ».
Analysez votre mise en page et vos besoins, puis choisissez la méthode à utiliser. Peut-être que votre cas demande position: absolute plutôt qu'un simple text-align: center. Flexbox ou CSS Grid ne sont pas toujours nécessaires. Ces outils ne sont pas toujours indispensables pour centrer des éléments, et il n'y a pas de solution intrinsèquement meilleure qu'une autre.
Cela dit, si je devais choisir, je prendrais en compte les codes suivants, un pour chaque type de mise en page (block, grid, flex) :
.container {
display: block;
align-content: center;
justify-items: center;
}
.container {
display: grid;
place-content: center;
}
.container {
display: flex;
flex-wrap: wrap;
place-content: center;
}
Remarque :
justify-itemsl’utilisation d’un conteneur de blocs n’est pas prise en charge par tous les navigateurs. Pour l’instant, cette fonctionnalité est réservée à Chrome ; nous vous recommandons donc d’utiliser Chrome pour consulter les exemples suivants.
Les propriétés sont définies à un seul endroit (le conteneur), et les méthodes conviennent au centrage d'un ou plusieurs éléments.
Vous ne remarquerez aucune différence si vous centrez un élément unique. L'item 1 est parfaitement centré, les trois méthodes se comportent de la même manière :
Avec plusieurs éléments, Flexbox se comporte différemment. Il adopte un comportement responsive (adaptatif) : les éléments sont initialement disposés horizontalement et passent à la ligne lorsque le conteneur est rétréci. Redimensionnez le conteneur et observez le résultat :
Et avec plusieurs articles de tailles différentes, leur comportement diffère :
Nous avons commencé avec trois approches qui donnaient le même résultat visuel lorsqu'on travaille avec un seul élément. Mais lorsqu'on ajoute d'autres éléments, les différences apparaissent clairement. Cette différence est importante car elle montre qu'il ne s'agit pas de choisir un code au hasard pour centrer des éléments. Il s'agit de comprendre le comportement de chaque code dans différentes situations, puis de choisir le plus adapté. Il est faux de croire que l'on peut centrer de la même manière avec Flexbox, CSS Grid, etc. Toutes ces méthodes sont différentes et reposent sur des mécanismes différents, même si elles donnent le même résultat pour un seul élément.
Cela explique aussi pourquoi nous avons techniquement 100 façons de centrer des éléments. Nous avons différents types de mise en page, et chaque mise en page possède sa propre logique d'alignement. Mais lorsque la structure se réduit à un seul élément dans un conteneur, nous avons de nombreux choix, et plusieurs méthodes peuvent sembler identiques, même si elles sont différentes.
Je le répète : étudiez la logique d'alignement de chaque code pour déterminer celui qui convient à votre cas d'utilisation. Ne vous contentez pas de copier-coller un code qui « fonctionne » sans réfléchir.
Et le centrage du texte ?
Lorsqu'on centre des "boîtes", on ne rencontre généralement aucun problème si l'on applique correctement les propriétés. Mais dès qu'il s'agit de texte, centrer parfaitement la hauteur peut s'avérer délicat. On constate toujours l'espace supplémentaire au-dessus ou en dessous, qu'on ne peut pas vraiment contrôler, et qu'il faut parfois utiliser des valeurs arbitraires ("magiques") pour l'interligne ou le remplissage afin de le corriger.
Nous disposons désormais d'une nouvelle propriété qui nous permet de corriger ce problème : text-box. Elle réduit l'espace supplémentaire en fonction de votre configuration.
Dans les deux encadrés, j'ai centré le contenu à l'aide d'un code commun. Remarquez que le premier encadré n'est pas optimal : le texte semble décalé, malgré une utilisation correcte des propriétés CSS.
C'est frustrant, n'est-ce pas ? En CSS, tout est parfaitement centré, mais pour nous, non. Pourquoi ?!
Cela dépend de la conception de la police et de l'espace réservé à chaque caractère. Ajouter une bordure autour du texte améliorera la lisibilité.
Deux exemples du mot « Texte » à côté d'un carré rouge. Le premier exemple est légèrement décentré en raison de l'interligne, tandis que le second est parfaitement centré par rapport au carré grâce à la suppression de l'interligne superflu.
Comme vous pouvez le constater, la zone de texte est centrée, mais il y a un espace indésirable à l'intérieur. J'ai pu supprimer cet espace avec une seule ligne de code :
text-box: cap alphabetic;
Essayons du texte en minuscules, sans jambages ni ascendantes :
Cette fois-ci, j'utilise des mots-clés légèrement différents :
text-box: ex alphabetic;
…pour supprimer l’espace et obtenir un centrage parfait
Deux exemples du mot « awesome » à côté d'un carré rouge. Le premier exemple est légèrement décentré en raison de l'interligne, tandis que le second est parfaitement centré par rapport au carré grâce à la suppression de l'interligne superflu. Les valeurs peuvent paraître étranges et peu intuitives, mais j'ai créé un petit générateur qui vous permet de spécifier facilement l'espace à supprimer et d'obtenir le code en un rien de temps.
Mise en évidence de la hauteur de ligne rendue d'un texte, montrant l'espace qu'elle ajoute au contenu. Et si vous souhaitez plus de détails sur cette fonctionnalité, consultez l'article de Danny Schwarz intitulé « Deux propriétés CSS pour réduire les espaces blancs dans les zones de texte ».
Centrage avec le positionnement d'ancre CSS Dans certains cas, vous devrez peut-être utiliser une position absolue ou fixe, ce qui signifie que nous avons affaire à un élément hors flux et à une logique d'alignement différente ; d'où une autre technique de centrage.
La méthode courante consiste à utiliser la méthode classique top et left combinés avec translate:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Ça fonctionne, et tout le monde est content, mais ce n'est pas le code idéal. En 2026, je le considérerais comme du bricolage, à éviter absolument. C'est comme créer des mises en page avec float … Cette approche était valable jusqu'à l'arrivée de Flexbox et CSS Grid, conçus spécifiquement pour ce genre de cas.
Il en va de même pour les éléments positionnés de manière absolue. Aujourd'hui, il est préférable d'utiliser des fonctionnalités CSS modernes comme celle-ci :
inset: 0;
place-self: center;
Cette propriété inset contrôle le « bloc contenant modifié inséré » (IMCB) et place-self (l'abréviation de justify-self et align-self) aligne l'élément à l'intérieur de l'IMCB. J'explique tous ces concepts en détail dans cet article.
Où se situe le positionnement des ancres dans tout cela ?
Excellente question ! Le positionnement par ancrage repose sur des éléments absolus (ou fixes) et possède son propre mécanisme pour contrôler la position d'un élément par rapport à son ancrage. Nous nous intéressons plus particulièrement au centrage, nous devons donc aborder une nouvelle valeur : anchor-center.
Commençons par l'exemple suivant :
Je place la zone de texte au-dessus du lien position-area: top. Vous pouvez déplacer le lien, et la zone de texte restera fixée en haut et centrée.
Mettons à jour l'alignement et utilisons place-self: center.
La position semble un peu étrange au premier abord, mais si vous déplacez l'ancre et regardez attentivement, vous verrez la boîte centrée dans la zone supérieure.
Une étiquette bleu clair portant l'inscription « CSS is Awesome » est placée en haut au centre d'un conteneur contenant une icône d'ancre positionnée au centre gauche de ce conteneur. Des lignes rouges pointillées délimitent la position des deux éléments. Centrer un élément n'est vraiment pas chose facile ! C'est déroutant si l'on ne sait pas précisément où il est centré. On pourrait croire que quelque chose est cassé, car l'œil ne perçoit pas l'élément comme étant centré.
Si vous souhaitez revenir à la position précédente, vous pouvez utiliser ceci :
place-self: end anchor-center;
…ou ceci :
align-self: end;
justify-self: anchor-center;
Ce qui se passe ici, c'est que verticalement, l'élément est placé à l'extrémité (en bas), et horizontalement, il est centré sur l'élément d'ancrage. Autrement dit, anchor-center est la valeur qui permet à l'élément de suivre l'ancrage lorsqu'on le fait glisser !
Cela signifie que nous avons deux manières différentes d'utiliser le positionnement d'ancrage pour le centrage : soit (1) centrer par rapport à la zone sélectionnée en utilisant la valeur center, soit (2) centrer par rapport à l'ancrage en utilisant la valeur anchor-center.
Dans la plupart des cas , vous n'aurez que rarement besoin d'utiliser cette valeur anchor-center, car le positionnement des ancres est automatiquement ajusté selon la zone. Ce réglage position-area devrait suffire, mais il est utile de savoir comment modifier l'alignement et de comprendre la différence entre center et anchor-center.
Si vous souhaitez explorer l'alignement dans le positionnement des ancres, j'ai créé une démo interactive qui vous permet de définir la zone, d'ajuster l'alignement et d'en visualiser le résultat. Vous pouvez définir 36 positions différentes position-area et cinq valeurs d'alignement par axe.
L'interface utilisateur d'une démo interactive qui place une étiquette indiquant « CSS is Awesome » autour de différents côtés et bords d'une icône d'ancre, avec des commandes permettant de modifier cette position et de générer le code CSS correspondant.
Centrage sûr et dangereux
Vous vous demandez sans doute quel est le rapport entre la sécurité et le centrage, n'est-ce pas ? Rassurez-vous, le centrage ne présente pas de risques de sécurité à proprement parler, mais il peut s'avérer risqué pour votre contenu !
Prenons l'exemple suivant :
J'utilise CSS Grid pour centrer un carré rouge dans un conteneur, et deux cas de figure se présentent : soit le carré rouge est plus petit que le conteneur (cas classique), soit il est plus grand (cas moins fréquent).
Dans les deux cas, le carré rouge reste centré, c'est-à-dire que son centre coïncide avec celui du conteneur. Cette méthode de centrage est dangereuse, et pourtant, c'est le comportement par défaut de nombreuses méthodes de centrage.
Pourquoi est-ce dangereux ? Le contenu du conteneur déborde de tous côtés. Si vous décidez de masquer ce débordement et d'ajouter une barre de défilement, certaines parties du contenu deviendront inaccessibles, ce qui constitue une perte de données . Dans ce cas précis, les parties supérieure et gauche sont inaccessibles. C'est ce que j'entends par « dangereux » .
Essayez de faire défiler le deuxième conteneur, et vous remarquerez que vous ne pouvez pas voir les bordures supérieure et gauche du carré rouge.
Nous pouvons corriger cela en utilisant safe un alignement comme celui-ci :
place-content: safe center;
En cas de débordement, le navigateur déplace l'élément vers une position plus sûre, affichant ainsi l'intégralité du contenu si le défilement est nécessaire. Autrement dit, le navigateur privilégie la visibilité du contenu au centrage (contrairement à un alignement non sécurisé).
Je sais ce que vous pensez probablement, et vous avez tort ! Ajouter du code safe partout n'est pas une bonne idée. Parfois, ce comportement risqué est précisément ce que l'on souhaite ; n'y recourez donc qu'en cas d'obstruction de contenu.
Revenons à la démonstration de positionnement des ancres : Voir la démo dans Codepen
Si vous faites glisser le point d'ancrage plus près des bords, la boîte est bloquée par ces bords (le bloc conteneur) et l'alignement par défaut est perdu !
Une étiquette indiquant « CSS is Awesome » centrée au-dessus d'une icône d'ancre située vers le bord gauche d'un conteneur. En matière de positionnement d'ancres, le comportement par défaut est safe l'alignement. Si vous l'ignorez, vous risquez de perdre beaucoup de temps à essayer de comprendre pourquoi l'élément n'est pas centré.
Vous pouvez modifier ce comportement à l'aide du mot-clé unsafe :
place-self: unsafe end unsafe anchor-center;
Ou:
justify-self: unsafe anchor-center;
align-self: unsafe end;
Le navigateur autorise désormais le débordement du contenu de la boîte. Il privilégie l'alignement plutôt que la perte potentielle de contenu due à ce débordement.
Et si vous pensez qu'il est inutile d'utiliser l' alignement "unsafe" pour le positionnement des ancres, vous vous trompez. Voici un exemple où j'ai dû recourir à un alignement non sécurisé. Nous avons un en-tête fixe avec une petite icône à côté du titre du site web ; au survol de la souris, une infobulle s'affiche. L'en-tête fixe crée un bloc conteneur pour l'infobulle et, par défaut, l'empêche de déborder. J'ai donc dû utiliser un alignement non sécurisé pour autoriser ce débordement tout en conservant le bon positionnement de l'infobulle.
Je sais que cela peut prêter à confusion, mais vous aurez rarement besoin de modifier les paramètres de sécurité. Continuez d'utiliser le comportement par défaut du navigateur, mais n'oubliez pas que vous disposez des valeurs safe et unsafe pour corriger un éventuel décalage.
Conclusion
J'espère qu'après avoir lu cet article, vous envisagerez le centrage sous un angle différent. Il ne s'agit pas simplement de choisir un code fonctionnel et de s'en contenter. Il s'agit de comprendre le fonctionnement de l'alignement , de prendre en compte votre cas d'utilisation et votre mise en page spécifiques, de choisir le code approprié et, surtout, de comprendre pourquoi il fonctionne.