Comment centrer un `div` en CSS

Méthodes pour centrer un élément

• Placer un élément au centre à l’intérieur de son élément parent a longtemps été un problème délicat.
• Avec l’évolution de CSS, diverses solutions ont été proposées, et le choix est désormais plus large.
• Ce tutoriel aide à comprendre les compromis entre différentes approches et propose une stratégie pour gérer le centrage dans tous les scénarios.

Centrage avec les marges automatiques

• Lorsqu’on veut centrer un élément horizontalement, on peut utiliser des marges avec la valeur auto.
• Il faut limiter la largeur de l’élément, et fit-content permet à l’élément de s’adapter à son contenu.
• La propriété margin-inline permet de définir margin-left et margin-right à auto en une seule fois.

Centrage avec Flexbox

• Flexbox offre un grand contrôle pour répartir un groupe d’éléments le long de l’axe principal.
• Il permet de centrer un seul élément horizontalement et verticalement, et le centrage est maintenu même si les éléments enfants ne tiennent pas dans le conteneur.
• La propriété flex-direction permet de contrôler le sens d’empilement de plusieurs éléments enfants.

Centrage dans le viewport

• Il arrive qu’il faille centrer un élément dans le viewport plutôt que dans son conteneur parent.
• En utilisant position: fixed et inset: 0px, on peut fixer l’élément au viewport, puis le centrer horizontalement et verticalement avec margin: auto.

Centrer un élément de taille inconnue

• Lorsqu’on ne connaît pas explicitement la taille d’un élément, fit-content peut être utilisé pour réduire l’élément à la taille de son contenu.

Centrage avec CSS Grid

• Avec CSS Grid, la manière la plus concise de centrer un élément horizontalement et verticalement consiste à utiliser la propriété place-content: center.

Différences avec Flexbox

• CSS Grid utilise un algorithme de mise en page différent, et cette complexité supplémentaire peut parfois poser problème.
• Flexbox calcule les pourcentages par rapport à l’élément parent, tandis que CSS Grid les calcule par rapport à la cellule de grille.

Centrer une pile d’éléments

• CSS Grid permet d’assigner plusieurs éléments à une même cellule, ce qui les empile de l’arrière vers l’avant.

Centrer du texte

• Le texte bénéficie d’un traitement particulier en CSS, et peut être centré avec la propriété text-align.

Le futur du centrage

• La propriété align-content est également en cours d’implémentation dans la mise en page Flow, ce qui permet de contrôler l’alignement du contenu dans le sens des blocs.

Au-delà des patterns

• Une compréhension approfondie de CSS permet de résoudre les problèmes avec intuition, plutôt qu’en s’appuyant uniquement sur la mémoire.

Choisir la bonne méthode

• Si vous voulez centrer horizontalement un seul élément, vous pouvez utiliser la stratégie des marges automatiques du layout Flow.
• Pour centrer une interface flottante comme une modale ou une bannière, vous pouvez utiliser un layout positionné avec des marges automatiques.
• Pour centrer une pile d’éléments, vous pouvez utiliser CSS Grid.
• Pour centrer du texte, vous pouvez utiliser text-align, éventuellement en combinaison avec d’autres méthodes.
• Dans la plupart des autres cas, Flexbox convient parfaitement. C’est la méthode la plus polyvalente pour centrer un ou plusieurs enfants horizontalement et verticalement.

L’avis de GN⁺

• Le point le plus important de cet article est d’aider à comprendre les différentes méthodes de centrage en CSS.
• Grâce à l’évolution de CSS, les tâches de centrage autrefois complexes sont devenues bien plus simples, ce qui aide énormément les développeurs web.
• Comprendre et exploiter des technologies CSS modernes comme Flexbox et CSS Grid est devenu une compétence essentielle en design web et en mise en page.

[v08zbv8fvlkjasdflkj]

Maintenant que j’y pense, ça me gêne soudain aussi que, sur GeekNews, les articles ne soient pas centrés, ouin, haha

[joyfui]

J’utilise souvent place-items: center;, mais il y a visiblement plusieurs autres méthodes.

[GN⁺]

Avis Hacker News

• Résumé du premier commentaire :

  • Il existe divers avis sur les raisons pour lesquelles il est difficile de centrer un élément en CSS.
  • Quand la plupart des gens demandent pourquoi le centrage est difficile, ils veulent simplement savoir comment placer un élément exactement au centre d’un autre.
  • Dans l’ancien HTML, on pouvait facilement centrer avec la balise <table>, mais en CSS cela donne l’impression d’être difficile.
  • Il est décevant que CSS, présenté comme un meilleur outil, n’ait même pas permis facilement un centrage aussi basique.
  • C’est pour cette raison que les mises en page en tableau ont été utilisées pendant longtemps.
  • Malgré tout, CSS reste apprécié.

• Résumé du deuxième commentaire :

  • Beaucoup de gens ne comprennent pas la complexité de la mise en page et du formatage automatiques.
  • Il est impossible d’abstraire cette complexité en un simple « fais ce que je veux ».
  • En prenant comme exemple le site de Gwern Branwen, il est important de contraindre le contenu pour qu’il corresponde au style souhaité.
  • La mise en page web est un processus complexe consistant à présenter le contenu sur des affichages variés.
  • CSS peut sembler complexe pour ceux qui décident de créer des pages web pour la première fois, mais il offre en réalité un large éventail de choix.
  • Obtenir le résultat souhaité demande de trouver les bons outils et de structurer le contenu de manière appropriée.

• Résumé du troisième commentaire :

  • Pour comprendre le positionnement et le centrage en CSS, il est utile de bien comprendre le modèle de boîte.
  • Les propriétés display et position sont fondamentales pour apprendre le positionnement.
  • MDN propose des articles utiles à ce sujet.

• Résumé du quatrième commentaire :

  • L’article est excellent, et sa partie interactive est particulièrement impressionnante.
  • Son auteur utilise depuis longtemps un site web qui facilite le centrage en CSS.

• Résumé du cinquième commentaire :

  • En CSS, le « centrage » est un problème classique.
  • Si CSS manque de clarté, c’est parce qu’il s’agit d’un assemblage complexe conçu par plusieurs comités en parallèle.
  • CSS existe sous forme de modules distincts, dans un état de changement permanent.
  • Ce n’est pas une manière souhaitable de développer des logiciels.

• Résumé du sixième commentaire :

  • Même après des décennies, CSS n’a pas proposé de méthode aussi efficace pour centrer qu’avec les tableaux.
  • Pendant cette période, l’usage des tableaux pour la mise en page a été considéré comme honteux.

• Résumé du septième commentaire :

  • Beaucoup de gens ont des frustrations vis-à-vis de CSS.
  • Le principal problème est que les règles de style entrent en conflit entre elles, ou échouent sans produire aucun effet.

• Résumé du huitième commentaire :

  • Comme l’indique l’article, Flexbox résout le problème du centrage dans les cas simples.
  • Si Flexbox ne suffit pas, c’est que l’on essaie de faire quelque chose de plus complexe qu’un simple centrage.

• Résumé du neuvième commentaire :

  • Sa méthode principale pour centrer consiste à utiliser position: absolute, left: 50%, transform: translateX(-50%).

• Résumé du dixième commentaire :

  • Le fait qu’il soit si difficile de centrer un div en CSS est la raison pour laquelle il a abandonné le développement web.