Un guide pratique du centrage en CSS

Comme je l'ai brièvement mentionné dans mon introduction aux fonctions mathématiques CSS - après avoir publié l'article utile sur les astuces CSS - j'ai vu du trafic arriver sur ce site pour des mots-clés comme "comment centrer CSS". Il est donc logique que j'aie finalement rédigé un tel article moi-même.

Je suis certain que le problème avec le centrage des choses à l'aide de CSS n'est pas lié à la mémorisation du justify-content: center; propriété. Cela a plus à voir avec le fait que différentes structures de mise en page ont leurs propres règles et peuvent ne pas respecter une certaine approche.

Mais, tout d'abord, à qui s'adresse ce guide :

• Les développeurs front-end qui se sentent dépassés par les « règles et réglementations » de CSS.
• Quiconque a du mal à centrer cette div une fois pour toutes. Aaahhhh !!
• Les propriétaires de sites Web qui sont coincés avec des modèles/thèmes mal structurés.

En CSS, le centrage est souvent appelé vertical, horizontal ou vertical et horizontal.

Vous pouvez également l'interpréter comme gauche, droite et gauche et droite. Et dans certains cas, vous pouvez également le voir appelé Top & Bottom. Ce seront également les termes que nous utiliserons tout au long de ce guide. Cela dit, commençons par l'approche la plus recherchée de toutes.

Éléments en ligne et en bloc : text-align

L'une des choses qui peuvent ne pas sembler évidentes au premier abord est que text-align: center; fonctionne pour plus que de simples paragraphes. En tant que propriété, elle peut être appliquée à tout élément considéré comme un bloc. Cela signifie que tant que votre contenu est enveloppé dans <div> ou un élément similaire, il peut être centré à l'aide de text-align .

CSS et HTML

 <style> .text-align-container { display: flex; } .text-align-container-style .item { background: #fff2ea; padding: 20px 0; text-align: center; width: 100%; } </style> <div class="text-align-container text-align-container-style"> <div class="item">Hi, I am centered.</div> </div>

La bonne chose à propos de cette approche est qu'elle fonctionne à la fois pour Grid et Flexbox. Tant que vous enveloppez le contenu dans la div, cela fonctionnera aussi bien pour le contenu tel que les images.

Et cela fonctionne bien avec les listes aussi:

Voyons ce qui se passe si nous essayons de centrer un élément <span> sans l'envelopper d'abord dans un conteneur de blocs.

CSS et HTML

 .span-demo-container { background: #fff2ea; padding: 20px 0; width: 100%; } .span-demo-center { text-align: center; } <div class="span-demo-container"> <span class="span-demo-center">Am I in the center?</span> </div>

Et le résultat est :

La raison pour laquelle cet élément <span> n'est pas centré est qu'il s'agit d'un élément en ligne. Pour les éléments en ligne, vous souhaitez toujours définir un parent .

Donc, si nous revenons en arrière et prenons la classe span-demo-center et l'appliquons à la <div> - le résultat sera comme ceci :

Si vous travaillez avec une grande base de code ou utilisez un modèle mal structuré, c'est généralement la principale raison pour laquelle le centrage ne fonctionne pas. En tant que tel, vérifiez toujours les éléments de bloc et en ligne et voyez s'ils sont correctement imbriqués.

Éléments de bloc de centrage à largeur fixe

Une autre méthode populaire pour centrer les éléments consiste à utiliser margin: auto; , qui est le plus couramment utilisé pour les éléments de bloc avec une largeur fixe.

Alors, pensez à une div personnalisée dans un conteneur plus grand. Et, ensuite, vous essayez de mettre du contenu dans cet élément div personnalisé et de le centrer.

Faisons un exemple en direct pour le voir en action :

CSS et HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner { width: 200px; padding: 1rem; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <div class="margin-auto-inner">Div & Text centered.</div> </div>

Dans cet exemple, la classe margin-auto-container prend le conteneur de cet article de blog, puis nous créons une nouvelle classe appelée margin-auto-inner et lui appliquons une largeur fixe avec un style personnalisé. Enfin, nous appliquons margin: 0 auto; pour s'assurer que notre conteneur intérieur va rester centré par rapport au conteneur principal.

 Pourquoi le 0 ? Nous ajoutons le 0 car nous voulons laisser la marge verticale (haut et bas) telle quelle et appliquer une marge automatique à la vue horizontale (droite et gauche). Vous pouvez modifier cela pour spécifier des marges individuelles telles que "marge : 25px auto 50px ;" ce qui laisserait une marge de 25 pixels en haut et une marge de 50 pixels en bas.

Important : La raison de votre marge : auto ; n'est pas centré, c'est parce que vous n'avez pas défini de largeur fixe pour l'élément que vous essayez de centrer.

Nous spécifions également text-align: center; car cela centrera le texte à l' intérieur du conteneur intérieur.

Centrage des éléments en ligne avec une largeur fixe

Dans le cas d'un élément en ligne, la largeur personnalisée est ignorée.

Regardons une démo :

CSS et HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner-span { width: 150px; padding: 5px; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <span class="margin-auto-inner-span">Inline <span> element with custom width. (Not centered).</span> </div>

Et le résultat est :

Comme vous pouvez le voir, malgré le réglage margin: auto; l'élément en ligne span n'est pas centré.

Heureusement, il existe une solution simple pour cela. En ajoutant display: block; propriété à notre classe margin-auto-inner-span - nous pouvons dire au navigateur que nous voulons que cet élément spécifique soit traité comme un bloc . Et maintenant, il devrait être centré:

À ce stade, vous vous demandez peut-être quels éléments HTML sont considérés comme des Blocks et lesquels comme Inline . Compréhensible. Je recommande de regarder la référence MDN:

• Éléments de niveau bloc
• Éléments en ligne

Si vous connaissez la différence entre Inline et Block, il sera beaucoup plus facile de trouver la solution de centrage adaptée à votre problème.

Grille et Flexbox : la manière moderne

Grid et Flexbox sont les deux modules de mise en page utilisés dans la conception Web moderne. Alors que Flexbox est un système de mise en page unidimensionnel, Grid est basé sur une approche bidimensionnelle.

Et le centrage d'un div pour les deux mises en page peut être fait avec seulement deux lignes de code.

Vertical et horizontal : une solution universelle

Pour les mises en page Grid et Flexbox, vous pouvez utiliser le place-content: center; propriété.

CSS et HTML

 .center-div-grid-layout { display: grid; /* display: flex; */ place-content: center; } <div class="center-div-grid-layout">It's that easy.</div>

La propriété place-content est un raccourci pour align-content & justifier-content .

Avec place-content vous pouvez faire une multitude de variations de placement, selon le style de mise en page avec lequel vous travaillez :

Pour une référence complète, veuillez consulter cette page MDN.

Dans l'ensemble, il existe un très petit nombre de cas extrêmes où les techniques de centrage décrites ne seraient pas suffisantes. Si vous travaillez avec une mise en page ancienne, votre meilleur pari est de trouver des incohérences dans les noms de classe à l'intérieur de la feuille de style elle-même. Trouvez ensuite un moyen d'imbriquer correctement les éléments afin que la logique de centrage spécifiée soit exécutée correctement.

Centrage absolu : transformer

La propriété transform est utilisée lorsque vous voulez que quelque chose soit centré "mort au centre" - horizontalement et verticalement (gauche, droite, haut, bas).

CSS et HTML

 .transform-example-container { height: 150px; position: relative; background: #fff2ea; } .transform-example-container .transform-absolute { width: 300px; text-align: center; background: #efba93; color: #fff; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin: 0; padding: 10px 0; position: absolute; } <div class="transform-example-container"> <p class="transform-absolute">Example: CSS transform</p> </div>

Cela fonctionne en définissant la position sur absolue pour l'élément enfant que vous souhaitez centrer.

Il est important que l'élément parent ait la position relative , sinon la propriété transform utilisera la mise en page principale comme parent.

Nous utilisons top et left pour définir la position par rapport au coin supérieur gauche. Après quoi, l'élément peut être tiré au centre en utilisant translate() .

La marge et le rembourrage doivent être définis sur 0, sinon vous subirez un changement de position.

Et cela conclut notre tutoriel/référence. Si vous souhaitez maîtriser le centrage avec CSS, lancez votre éditeur de code préféré et commencez à tester ces exemples.