Comment centrer une div en CSS

 (joshwcomeau.com)
5 points par GN⁺ 2024-02-14 | 3 commentaires | Partager sur WhatsApp
  • Le centrage en CSS n’est plus une astuce unique : selon que l’élément est dans le flux du document, flottant ou multiple, il faut choisir entre Flow, Flexbox, Positioned layout, CSS Grid et text-align.
  • Pour centrer horizontalement un seul élément, l’approche Flow layout, qui limite la largeur avec max-width: fit-content puis applique margin-inline: auto, affecte moins les éléments frères.
  • Avec Flexbox, justify-content: center et align-items: center suffisent pour centrer horizontalement/verticalement un ou plusieurs enfants, et même si un enfant déborde, le débordement reste symétrique.
  • Pour les UI flottantes comme les modales et bannières, la bonne combinaison est position: fixed, inset: 0, des contraintes de taille et margin: auto; CSS Grid, lui, est efficace pour une syntaxe courte et la superposition.
  • Le texte lui-même ne se centre pas via l’alignement de mise en page : il faut text-align: center. Et si la prise en charge de align-content dans le Flow layout s’élargit, on aura moins besoin de passer à Flexbox ou Grid pour un simple centrage vertical.

Centrage horizontal avec des marges auto en Flow layout

  • L’une des anciennes stratégies consiste à limiter la largeur de l’élément, puis à mettre les marges gauche et droite à auto.
.element {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
  • En Flow layout, les éléments remplissent par défaut l’espace horizontal ; pour les centrer, il faut donc d’abord limiter leur largeur.
  • fit-content fait en sorte que l’élément épouse son contenu, de sorte que width soit déterminée par la taille du contenu, comme height.
  • Utiliser max-width au lieu de width ne fixe que la taille maximale : lorsque le conteneur se rétrécit, l’élément peut donc se réduire avec lui.
  • Avec seulement margin-left: auto, l’espace restant va dans la marge gauche ; avec les deux marges à auto, l’espace restant est réparti équitablement et l’élément se retrouve centré.
.element {
  max-width: fit-content;
  margin-inline: auto;
}
  • margin-inline est une façon moderne de donner la même valeur à margin-left et margin-right, avec une bonne prise en charge navigateur.
  • margin-inline fait partie des propriétés logiques (logical properties) : elle agit non pas selon gauche/droite, mais selon l’axe inline de la direction d’écriture.
    • Elle permet d’appliquer la marge du bon côté aussi bien dans les langues écrites de gauche à droite que dans celles écrites de droite à gauche.
  • Cette approche est utile quand on veut centrer un seul enfant sans affecter ses éléments frères, par exemple une image au milieu d’un article de blog.

Centrer un ou plusieurs enfants avec Flexbox

  • Flexbox est un mode de mise en page puissant pour disposer plusieurs éléments le long de l’axe principal, et il est aussi souvent utilisé pour le centrage.
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • En combinant justify-content: center et align-items: center, on peut centrer les enfants horizontalement et verticalement.
  • Même si un enfant ne tient pas dans le conteneur, l’alignement est conservé et, en cas de dépassement, le débordement reste symétrique.
  • On peut aussi centrer plusieurs enfants, et contrôler leur direction d’empilement avec flex-direction.
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
  • C’est un choix par défaut pratique, applicable largement à un ou plusieurs enfants.

Centrer une UI flottante avec Positioned layout

  • Les éléments qui doivent sortir du flux normal du document et flotter au-dessus, comme les modales, prompts ou bannières, peuvent être gérés avec Positioned layout.
.element {
  position: fixed;
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}
  • position: fixed fixe l’élément au viewport, et inset: 0px définit top, left, right et bottom à 0px.
  • Avec seulement inset: 0px, l’élément tente de remplir tout le viewport ; il faut donc limiter sa taille avec width, height, max-width et max-height.
  • Cette combinaison crée volontairement des contraintes impossibles.
    • Un élément ne peut pas être à la fois à 0px de la gauche et de la droite tout en ayant une largeur de 12rem.
    • Le moteur de rendu CSS donne la priorité à la contrainte width, puis résout la tension en l’attachant à un côté selon la direction de la langue.
  • En ajoutant margin: auto, le navigateur change sa façon de résoudre ces contraintes et l’élément est placé au centre horizontalement et verticalement.
  • Les quatre conditions nécessaires sont position: fixed, inset: 0px, une largeur et une hauteur limitées, et margin: auto.

  • Centrer sur un seul axe, comme pour une bannière en bas

    .element {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 8px;
  width: 12rem;
  max-width: calc(
    100vw - 8px * 2
  );
  margin-inline: auto;
}
    • En omettant top: 0px, la contrainte impossible sur l’axe vertical disparaît et l’élément reste fixé en bas.
    • calc(100vw - 8px * 2) limite la largeur maximale pour laisser une marge de sécurité des deux côtés du viewport.
    • margin-inline: auto exprime plus précisément l’intention de centrage horizontal.

  • Éléments de taille inconnue

    .element {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}
    • Quand on ne connaît pas la taille de l’élément à l’avance, width: fit-content et height: fit-content permettent de l’ajuster à son contenu.
    • On peut ajouter une contrainte comme max-width: 60vw, mais ce n’est pas obligatoire : l’élément reste inclus dans le viewport.

  • Un centre volontairement légèrement décalé

    • En ajustant une valeur inset d’un seul côté, comme bottom: 48px, l’élément se déplace de la moitié de cette valeur.
    • Avec bottom: 48px, l’élément remonte de 24px.
    • C’est parce qu’il est centré à l’intérieur d’une boîte virtuelle située entre les limites haute et basse.
    • Avec transform: translateY(-48px), on peut déplacer l’élément exactement de 48px vers le haut.
    • La méthode par décalage bottom permet de réserver la propriété transform pour une animation ou un effet d’entrée ultérieur.

Centrage court et superposition avec CSS Grid

  • Dans CSS Grid, le code de centrage le plus court combine display: grid et place-content: center.
.container {
  display: grid;
  place-content: center;
}

  • place-content est un raccourci pour justify-content et align-content, qui applique la même valeur aux lignes et aux colonnes.

  • Avec ce réglage, une cellule Grid 1×1 est créée au centre du conteneur parent.

  • Différences avec Flexbox

    • Cela ressemble à Flexbox, mais CSS Grid utilise un algorithme de mise en page complètement différent.
    • La différence apparaît si l’on donne aux enfants width: 50% et height: 50%.
    • Dans Flexbox, les pourcentages sont calculés par rapport au parent .container.
    • Dans CSS Grid, les pourcentages sont calculés par rapport à la cellule Grid.
    • Si grid-template-columns ou grid-template-rows ne sont pas définis, les pistes Grid calculent leur taille en fonction du contenu, ce qui peut rendre l’élément plus petit que prévu.
    • Dans ce cas, on peut ajouter du CSS pour corriger la Grid, mais pour un simple centrage, Flexbox peut être plus simple.

  • Superposer plusieurs éléments au même endroit

    .container {
  display: grid;
  place-content: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • CSS Grid permet de placer plusieurs enfants dans la même cellule.
    • En donnant grid-row: 1 et grid-column: 1 à tous les .element, les éléments partagent le même espace Grid et se superposent les uns devant/derrière les autres.
    • Cela fonctionne même si les enfants ont des tailles différentes.
    .container {
  display: grid;
  place-content: center;
  place-items: center;
}

.element {
  grid-row: 1;
  grid-column: 1;
}
    • Pour superposer au centre des enfants de tailles différentes, il faut ajouter place-items: center.
    • place-items est un raccourci pour justify-items et align-items, et contrôle l’alignement des images à l’intérieur de la cellule Grid.
    • Sans cette propriété, la cellule Grid elle-même est centrée, mais les images à l’intérieur de la cellule s’empilent en haut à gauche.
    • Pour approfondir CSS Grid, vous pouvez consulter An Interactive Guide to CSS Grid.

Le texte se centre séparément avec text-align

  • Le texte doit être traité séparément en CSS : les techniques de mise en page comme Flexbox n’alignent pas les lettres individuellement.
  • Si l’on centre un paragraphe avec Flexbox, le bloc de paragraphe arrive bien au centre, mais les caractères à l’intérieur restent alignés à gauche.
  • Pour centrer le texte lui-même, il faut utiliser text-align: center.
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

L’avenir du Flow layout : align-content

  • En Flow layout, le centrage horizontal est possible avec les marges auto, mais le centrage vertical nécessitait jusqu’ici un autre mode de mise en page comme Flexbox ou Grid.
  • Début 2024, les éditeurs de navigateurs étaient en train d’implémenter align-content dans le Flow layout.
  • Ce nouveau comportement contrôle l’alignement dans la direction block du contenu ; à l’époque, il n’était disponible que derrière un flag dans Chrome Canary et dans Safari Technical Preview.
  • La démo d’exemple ne montre pas le comportement réel du Flow layout : elle le reproduit avec Flexbox après avoir vérifié le comportement dans Chrome Canary et Safari TP.
  • Cette fonctionnalité ne créera pas de nouvelles UI, mais elle pourra réduire le besoin de passer à un mode de mise en page distinct pour de simples centrages.

Critères de choix selon la situation

  • Pour centrer horizontalement un seul élément sans affecter ses frères, utilisez la stratégie marges auto en Flow layout.
  • Pour les UI flottantes comme les modales ou bannières, placez-les au centre avec Positioned layout et des marges auto.
  • Pour superposer plusieurs éléments au même emplacement en les centrant, CSS Grid est adapté.
  • Pour centrer du texte, utilisez text-align, éventuellement combiné à d’autres méthodes de centrage.
  • Dans la plupart des autres cas, Flexbox est le choix le plus polyvalent.
    • Il peut gérer un ou plusieurs enfants.
    • Il permet le centrage horizontal comme vertical.
    • Il fonctionne que les enfants tiennent dans le conteneur ou qu’ils débordent.

À lire aussi

3 commentaires

 
v08zbv8fvlkjasdflkj 2024-02-15

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

J’utilise souvent place-items: center;, mais il y a visiblement plusieurs autres méthodes.
 
GN⁺ 2024-02-14
Avis de Hacker News

  • Puisque les autres commentaires commentent les commentaires eux-mêmes, je vais m’y mettre aussi : je pense que le mème du centrage en CSS désigne surtout « comment placer un élément exactement au centre d’un autre »
    Du point de vue de l’implémentation, il est vrai que le centrage est difficile et peut avoir plusieurs significations, mais pour la génération GeoCities ou AngelFire, c’était difficile à accepter, parce qu’en HTML, même dans les années 90, on pouvait mettre hello sans problème au milieu d’une boîte jaune de 600x600
    C’était frustrant que le nouvel outil présenté comme meilleur ne sache pas faire une tâche standard qu’on faisait déjà, et c’est pour ça qu’on a continué à utiliser les mises en page en tableaux jusqu’à la fin des années 2000. J’aime CSS, mais c’est peut-être une forme de syndrome de Stockholm
    J’ai été surpris que valign fonctionne dans Chromium même sans être présent, et je ne sais pas si c’est un changement récent

    • Exactement comme dit : mettre hello au milieu d’une boîte jaune de 600x600 était possible dès la première version de CSS. Par exemple, l’attribut HTML valign correspond à la propriété CSS vertical-align des boîtes inline, inline-block et table-cell
      Cela dit, d’expérience, parmi les gens qui parlent avec nostalgie de n’utiliser que des tableaux ou qui se plaignent que CSS est limité et déroutant, beaucoup n’ont pas vraiment fait l’effort d’apprendre comment CSS fonctionne réellement. L’auteur, lui, en est au moins conscient
    • Dans Firefox aussi, ça fonctionne sans l’attribut "valign". Cela dit, quand on utilise des tableaux sans mise en page fixe, j’ai toujours observé de subtiles différences entre les trois principaux navigateurs ; donc, en général, je ne m’appuierais pas sur le comportement de mise en page automatique

  • Bon article, et les réactions ici sont assez surprenantes pour un lectorat supposément technique. La mise en page automatique et la composition sont vraiment difficiles, au point d’être effectivement des sujets de thèse[1]
    Il n’est pas réaliste de s’attendre à ce que cette complexité soit abstraite par une formule simple du genre « fais ce que je veux »
    Si l’on regarde le site de Gwern Branwen[2], cela tient presque de l’art, mais l’idée centrale est d’abord de définir l’apparence voulue, puis de contraindre le texte pour qu’il puisse s’exprimer dans ce style
    Je m’intéresse à la mise en page Web depuis que j’ai rejoint, en 1995, une startup se présentant comme « le premier magazine de golf du Web »[3], et Zen Garden ainsi que la liste de diffusion/le site A List Apart[4] m’ont fait comprendre à quel point il est difficile de produire du contenu Web qui rende bien dans des environnements de sortie variés
    Transposer du contenu sémantique vers un écran, du papier ou un plan fini est, au fond, une application ou projection depuis l’espace d’origine vers un ensemble de règles de l’espace de destination ; et ces règles incluent les contraintes physiques, les contraintes logicielles des navigateurs, ainsi que les comportements propres à chaque navigateur
    C’est pourquoi CSS peut sembler être un bazar pour quelqu’un qui veut « créer une page Web à partir de zéro », alors qu’en réalité il s’agit moins de contraintes qui empêchent de faire des choses que d’un excès de choix possibles
    [1] https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thes...
    [2] https://gwern.net/
    [3] Il s’appelait Golfweb et semble avoir fini par faire partie de CBS Sports
    [4] https://www.alistapart.com

    • Mon expérience de la mise en page Web ne date que de 1998, donc avec environ trois ans de retard, mais dans toute mon expérience liée au sujet, je n’ai encore rien vu d’aussi excellent que les ressources Every Layout[1]. Je les recommande vivement
      [1] https://every-layout.dev/rudiments/boxes/
    • Le problème de CSS tient presque entièrement à une complexité auto-infligée. Oui, la mise en page est difficile, mais je me demande pourquoi on a visé le modèle actuel, qui la rend encore plus difficile
      Il y a en particulier cet objectif sisyphéen de viser un seul grand modèle adapté à toutes les pages, puis de recalculer automatiquement la mise en page pour chaque page. Si l’on ajoute à cela l’objectif de couvrir toutes les tailles de fenêtre, je ne comprends pas pourquoi on a pensé que ce serait possible
    • Je ne pouvais pas ne pas ajouter ce lien pour montrer davantage d’art CSS
      https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/
      Je ne sais pas combien de div centrés il contient
    • Ces derniers jours, j’ai essayé de faire entrer de force une mise en page à flux et une pagination dans un système de mise en page basé sur Flexbox, et cela m’a bien confirmé que la mise en page et la composition sont difficiles
      En particulier, dans un tableau contenant du texte et des objets de tailles différentes selon les colonnes, déterminer quand et comment faire passer les éléments à la page suivante est un travail délicat de choix de bonnes heuristiques
    • Je ne sais pas comment distinguer si c’est un problème qu’on s’impose soi-même ou un problème de recherche intrinsèquement difficile. Avant d’arriver au développement Web, je n’avais jamais pensé que « la mise en page est difficile », et pourtant il existait déjà des fenêtres défilables et redimensionnables
      Dans custom appkit, des contrôles GTK ou des toolkits internes basés sur Lua, centrer du contenu ou gérer le retour à la ligne et l’alignement des éléments n’avait rien de particulier ; je me demande donc ce qui m’échappe sur le Web
      Dire que ce n’est qu’une « richesse de choix » me rappelle aussi le TMTOWTDI, enterré depuis longtemps

  • Excellent article, et les éléments interactifs sont particulièrement réussis. Ce qui m’a beaucoup aidé, il y a quelques années, à comprendre le positionnement et le centrage en CSS, c’est la lecture du modèle de boîte
    Comprendre le modèle de boîte aide à raisonner sur le flux dans le DOM, et les propriétés CSS display et position sont également fondamentales pour apprendre le positionnement. La documentation MDN est bien faite
    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

  • « Comment centrer » est une question classique en CSS, et le simple fait que ce ne soit pas évident au premier coup d’œil en dit long. CSS ressemble plutôt à un fourre-tout confus, un assemblage façon évier de cuisine conçu simultanément par plusieurs comités plutôt que par un seul
    La notion de véritable release a été abandonnée depuis longtemps, et l’état actuel de CSS ressemble davantage à l’agrégation de l’état de modules indépendants qui évoluent en permanence. Ce n’est pas une façon de développer du logiciel, et à vrai dire ce n’est pas une bonne façon de fabriquer quoi que ce soit

    • Je suis à la fois d’accord et pas d’accord. Les grands groupes humains avancent naturellement de manière lente et chaotique, un peu comme si l’on essayait de rassembler des chats
      Le Web et ses technologies n’ont pas non plus de direction collective clairement définie, donc il y a forcément beaucoup d’expériences ratées et d’incohérences. C’est un périmètre bien plus vaste qu’un projet d’ingénierie soigneusement planifié, avec un objectif et une trajectoire clairs
    • Si la question du centrage revient si souvent, c’est, à mon avis, parce qu’elle est extrêmement naturelle pour quelqu’un qui apprend
      Quand on commence à apprendre à donner à une page Web l’apparence souhaitée, on découvre généralement la taille du texte, la couleur, la couleur de fond et l’alignement ; et, à part l’alignement, le reste correspond presque 1:1 aux méthodes d’avant CSS
      Avant CSS, si l’on voulait placer du contenu au centre, il suffisait de le mettre dans une balise, que ce soit du texte ou un objet HTML comme un div, un tableau ou un bouton. Beaucoup de gens s’attendaient à ce que CSS fonctionne comme avant, sans distinction entre objets inline et block ; quand CSS n’a pas correspondu à cette idée reçue, ce genre de question est apparu

  • Cet article est vraiment excellent, en particulier son mode d’interaction. Il existe aussi depuis longtemps un outil qui donne presque toujours le résultat voulu
    http://howtocenterincss.com

  • Il a fallu des décennies à CSS pour proposer une solution aussi utilisable qu’un tableau avec du contenu centré, tandis que pendant tout ce temps, utiliser des tableaux pour la mise en page était critiqué

    • Les tableaux HTML ne se replient pas bien sur les écrans mobiles. Si l’on construit une mise en page avec des tableaux, on risque fortement de créer une barre de défilement horizontale, et il peut falloir la réécrire pour le mobile ; donc, sauf s’il s’agit d’un tableau de données, un framework CSS est généralement plus sûr
      Pour l’accessibilité, les tableaux HTML nécessitent au minimum un traitement du type ``
      https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/A...
      Les ressources sur CSS Grid Layout valent aussi le détour
      https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
      Firefox DevTools > INTRODUCTION TO CSS GRID LAYOUT: https://mozilladevelopers.github.io/playground/css-grid/
      CSS Grid Garden: https://cssgridgarden.com/
      MDN > "Relationship of grid layout to other layout methods": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
      MDN: "Box alignment in grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
    • Représenter des données qui ne sont pas tabulaires sous forme de tableau n’est pas sémantique et casse aussi l’accessibilité
      Le développement Web comporte bien plus d’éléments que l’emplacement du contenu sur la page, et c’est pour cela qu’un bon développement Web est difficile
    • Oui, je m’en souviens. L’avantage des div et de CSS, c’était leur réputation hipster ; l’inconvénient, c’était la soupe de DIV
      À l’époque, CSS était incroyablement inadapté à ce que les gens essayaient de faire, à mon avis parce qu’il avait été conçu pour la mise en forme de documents, pas pour les applications Web ni les mises en page d’écran
      À l’inverse, l’avantage de table, c’est que ça fonctionnait réellement
    • À l’époque, utiliser des tableaux me semblait être l’approche la plus robuste

  • Comme beaucoup ici, je pense que CSS est une catastrophe totale. Le problème central, c’est que les directives de style ne cessent de s’écraser les unes les autres, ou échouent silencieusement sans aucun effet

  • J’ai aimé la brutalité honnête de l’une des bannières de cookies dans les exemples
    « Nous attachons de l’importance à vos données personnelles. Pour améliorer votre expérience de navigation, nous utilisons des cookies qui vendent ces données à des annonceurs. Elles ont beaucoup de valeur »

  • Ce que l’on peut apprendre de l’histoire de l’utilisation des tableaux pour la mise en page est intéressant. Les tableaux ont des bordures, du padding, une mise en page à base de cellules organisées en colonnes, et, par extension, il faut aussi des espaces autour des tableaux et des cellules, c’est-à-dire des marges
    Les tableaux sont un élément établi depuis longtemps dans la mise en page et portaient en fait cette idée judicieuse que tous les éléments devraient, dans une certaine mesure, se comporter comme des cellules de tableau
    Les éléments doivent suivre le modèle de boîte, ce qui est assez évident pour quelqu’un qui travaille la typographie ; en revanche, le fait qu’ils doivent aussi être organisés en colonnes l’est moins, et c’est la base de Grid layout et de Bootstrap
    Quand on rencontre un problème de mise en page, qu’on le résout avec des tableaux, puis qu’on se rend compte qu’il faut une nouvelle fonctionnalité ayant certaines propriétés des tableaux mais pas toutes, c’est une évolution naturelle
    CSS l’a découvert, mais curieusement certains systèmes comme les traitements de texte n’ont pas réussi à unifier les éléments sous le modèle de boîte

  • Les plaintes du type « pourquoi est-ce encore aussi difficile ? » me semblent assez à côté de la plaque. Comme le dit l’article, Flexbox règle de façon intuitive tous les cas simples de centrage
    Si Flexbox ne suffit pas, c’est qu’on ne fait pas simplement du centrage, mais quelque chose de plus complexe, et il n’est pas raisonnable d’attendre une implémentation ultra simple

    • Avec le recul de quelqu’un qui pratique depuis longtemps, c’était difficile avant Flexbox, et c’était aussi difficile à l’époque où Flexbox n’était pas pris en charge à 100 %, parce qu’il fallait constamment suivre l’usage des navigateurs pour décider si on pouvait l’utiliser
      Aujourd’hui, il y a tellement de méthodes que la complexité est écrasante. On corrige plus souvent du vieux code qu’on n’en écrit du neuf, et il faut se demander pourquoi le CSS a été écrit d’une certaine manière, quels cas limites risquent de casser, si on peut le modifier, et quelle solution choisir parmi plusieurs quand ce n’est pas simple
      Même en parcourant l’article, ce n’est pas intuitif. Avec Flexbox aussi, le réglage horizontal se fait avec justify-content et le réglage vertical avec align-items, mais les noms de propriétés CSS sont si nombreux et arbitraires qu’on ne les retient plus vraiment
      Au final, la différence est entre construire des solutions complexes à partir de briques simples, intuitives et fiables, ou construire des solutions complexes à partir de briques elles-mêmes complexes, qui se recoupent partiellement et qu’il faut sans cesse rechercher
      Go ou Python sont plutôt du premier type, CSS plutôt du second
    • Flexbox est ce que j’ai toujours voulu que CSS devienne ; pendant longtemps ce n’était pas le cas, puis un jour ça l’est devenu, et on a pu abandonner la prise en charge des navigateurs sans Flexbox. Ça donne presque l’impression d’être la forme finale de CSS
      Il y avait une raison pour laquelle les gens aimaient le système de grille de Bootstrap, et Flexbox fait tout cela, et plus encore, directement dans le navigateur. Difficile d’exagérer à quel point je l’apprécie
    • À une époque, dans certains cas précis, c’était modérément difficile, mais depuis une dizaine d’années, c’est un problème résolu. Il y a encore des gens qui parlent du centrage d’un div en CSS comme si c’était quelque part entre l’alchimie et la science des fusées
      Cela montre qu’ils ne suivent pas l’évolution de CSS autant que les autres aspects du développement web, tout en se permettant ce genre d’affirmations
    • En plus, Flexbox est largement pris en charge depuis plus de dix ans. Le fil des commentaires ici est assez passionnant
    • C’est vraiment juste. Quand on se bat avec Flexbox, prendre du recul et procéder étape par étape aide beaucoup
      En allant de l’extérieur vers l’intérieur, de l’élément parent vers les éléments enfants, cela devient nettement plus facile. Il faut un peu de technique, mais fondamentalement, cela ressemble surtout à de l’algèbre élastique