Centrer en CSS

Suivez cinq techniques de centrage à travers une série de tests pour voir laquelle est la plus résiliente au changement.

Adam Argyle

Le centrage en CSS est un défi bien connu, qui fait l'objet de plaisanteries et de moqueries. 2020 Le CSS a bien grandi et nous pouvons désormais rire de ces blagues honnêtement, et non en serrant les dents.

Si vous préférez les vidéos, voici une version YouTube de ce post :

Le défi

Il existe différents types de centrage. En effet, les cas d'utilisation, le nombre d'éléments à centrer, etc. varient. Pour démontrer la logique derrière une technique de centrage "gagnante", j'ai créé le Resilience Ringer. Il s'agit d'une série de tests de résistance pour chaque stratégie de centrage afin d'équilibrer l'intérieur et de vous permettre d'observer leurs performances. À la fin, je révèle la technique qui a obtenu le meilleur score, ainsi que la "plus utile". Nous espérons que vous repartirez avec de nouvelles techniques et solutions de centrage.

Le champion de la résilience

Le Resilience Ringer est une représentation de mes convictions selon lesquelles une stratégie de centrage doit être résiliente aux mises en page internationales, aux fenêtres d'affichage de taille variable, aux modifications de texte et au contenu dynamique. Ces principes ont permis de définir les tests de résilience suivants pour que les techniques de centrage perdurent :

1. Écrasé : le centrage doit pouvoir gérer les modifications de largeur
2. Écrasé : le centrage doit pouvoir gérer les modifications de hauteur
3. Duplicate: centering should be dynamic to number of items
4. Edit: centering should be dynamic to length and language of content
5. Flux : le centrage doit être indépendant de la direction du document et du mode d'écriture.

La solution gagnante doit démontrer sa résilience en maintenant le contenu au centre, même lorsqu'il est écrasé, compressé, dupliqué, modifié et permuté dans différents modes et directions de langue. Un centre fiable, résilient et sûr.

Légende

J'ai fourni des indications visuelles de couleur pour vous aider à garder certaines métadonnées en contexte :

• Une bordure rose indique la propriété des styles de centrage
• La zone grise est l'arrière-plan du conteneur qui cherche à centrer les éléments.
• Chaque enfant a un arrière-plan blanc, ce qui vous permet de voir les effets de la technique de centrage sur la taille des zones enfants (le cas échéant).

Les cinq candidats

Cinq techniques de recentrage entrent dans l'arène de la résilience, mais une seule recevra la couronne de la résilience 👸.

1. Centre de contenu

Modifier et dupliquer du contenu avec VisBug

1. Squish : Super !
2. Squash : parfait !
3. Duplicate : parfait !
4. Modifier : parfait !
5. Flow : parfait !

Il sera difficile de faire plus concis que display: grid et le raccourci place-content. Comme elle centre et justifie les enfants collectivement, c'est une technique de centrage solide pour les groupes d'éléments destinés à être lus.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

Avantages

• Le contenu est centré même en cas d'espace limité et de dépassement
• Les modifications et la maintenance sont centralisées
• L'écart garantit un espacement égal entre les n enfants.
• La grille crée des lignes par défaut

Inconvénients

• L'enfant le plus large (max-content) définit la largeur de tous les autres. Nous aborderons ce point plus en détail dans Flexibilité en douceur.

Idéal pour les mises en page macro contenant des paragraphes et des titres, des prototypes ou, de manière générale, des éléments qui doivent être centrés de manière lisible.

Remarque  : place-content n'est pas exclusif à display: grid. display: flex peut également bénéficier des raccourcis place-content et place-item.

2. Gentle Flex

1. Squish : Parfait !
2. Squash : parfait !
3. Dupliquer : parfait !
4. Modifier : parfait !
5. Flow : Super !

Gentle Flex est une stratégie de centrage uniquement. Il est doux et progressif, car contrairement à place-content: center, aucune taille de zone enfant n'est modifiée pendant le centrage. Tous les éléments sont empilés, centrés et espacés aussi délicatement que possible.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Avantages

• Ne gère que l'alignement, la direction et la distribution
• Les modifications et la maintenance sont centralisées
• L'écart garantit un espacement égal entre les n enfants.

Inconvénients

• Le plus de lignes de code

Idéal pour les mises en page macro et micro.

Terme clé  : Les mises en page macro sont comme les États ou les territoires d'un pays : des zones de couverture très vastes et de très haut niveau. Les zones créées par les mises en page macro ont tendance à contenir plus de mises en page. Moins la mise en page couvre de surface, moins elle devient une mise en page macro. Lorsqu'une mise en page couvre moins de surface ou contient moins de mises en page, elle devient une micro-mise en page.

3. Autobot

1. Squish : excellent
2. Squash : excellent
3. Double : amende
4. Edit: great
5. Flux : excellent

Le conteneur est défini sur Flex sans style d'alignement, tandis que les enfants directs sont stylisés avec des marges automatiques. Il y a quelque chose de nostalgique et de merveilleux à travailler sur tous les côtés de l'élément avec margin: auto.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

Avantages

• Astuce amusante
• Rapide et approximatif

Inconvénients

• Résultats étranges en cas de dépassement
• Le fait de s'appuyer sur la distribution plutôt que sur l'espacement signifie que les mises en page peuvent se produire avec des enfants qui se touchent sur les côtés
• Le fait d'être"poussé" en position ne semble pas optimal et peut entraîner une modification de la taille de la boîte de l'enfant.

Idéal pour centrer des icônes ou des pseudo-éléments.

4. Centre Fluffy

1. Protection : mauvaise
2. Squash : mauvais
3. Duplicate : mauvais
4. Modifier : parfait !
5. Flow : Super ! (à condition d'utiliser des propriétés logiques)

Le candidat "fluffy center" est de loin notre candidat le plus savoureux, et c'est la seule technique de centrage qui est entièrement détenue par l'élément/l'enfant. Tu vois notre bordure rose intérieure ?

.fluffy-center {
  padding: 10ch;
}

Avantages

• Protège le contenu
• Nucléaire
• Chaque test contient secrètement cette stratégie de centrage
• L'espace entre les mots est un écart

Inconvénients

• Illusion de ne pas être utile
• Il y a un conflit entre le conteneur et les éléments, car chacun est très strict quant à sa taille.

Idéal pour le centrage de mots ou d'expressions, les tags, les boutons, les chips, etc.

5. Pop et Plop

1. Squish : OK
2. Squash : d'accord
3. Duplicate : mauvais
4. Modifier : amende
5. Flux : faible

Cela est dû au fait que le positionnement absolu fait sortir l'élément du flux normal. La partie "plop" du nom vient du moment où je le trouve le plus utile : quand je le place au-dessus d'autres éléments. Il s'agit d'une technique classique et pratique de centrage de superposition, qui est flexible et dynamique en fonction de la taille du contenu. Parfois, il vous suffit de placer une UI au-dessus d'une autre.

Avantages

• Utile
• Fiable
• Quand vous en avez besoin, elle est d'une valeur inestimable.

Inconvénients

• Code avec des valeurs de pourcentage négatives
• Nécessite position: relative pour forcer un bloc conteneur
• Sauts de ligne prématurés et maladroits
• Il ne peut y en avoir qu'un seul par bloc conteneur sans effort supplémentaire.

Idéal pour les fenêtres modales, les toasts et les messages, les piles et les effets de profondeur, et les popovers.

Le gagnant

Si j'étais sur une île et que je ne pouvais avoir qu'une seule technique de recentrage, ce serait…

[roulement de tambour]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Vous la trouverez toujours dans mes feuilles de style, car elle est utile pour les mises en page macro et micro. C'est une solution fiable à tous points de vue, qui donne des résultats conformes à mes attentes. De plus, comme je suis un adepte du dimensionnement intrinsèque, j'ai tendance à me tourner vers cette solution. Certes, cela demande beaucoup de saisie, mais les avantages l'emportent sur le code supplémentaire.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Le centrage Fluffy est si microscopique qu'il est facile de l'oublier en tant que technique de centrage, mais c'est un élément essentiel de mes stratégies de centrage. C'est tellement atomique que j'oublie parfois que je l'utilise.

Conclusion

Quels types d'éléments perturbent vos stratégies de recentrage ? Quels autres défis pourraient être ajoutés au parcours de résilience ? J'ai envisagé la traduction et un commutateur de hauteur automatique sur le conteneur… quoi d'autre ?

Maintenant que vous savez comment j'ai fait, comment feriez-vous ? Diversifions nos approches et découvrons toutes les façons de créer sur le Web. Suivez l'atelier de programmation associé à cet article pour créer votre propre exemple de centrage, comme ceux de cet article. Tweetez-moi votre version, et je l'ajouterai à la section Remix de la communauté ci-dessous.

Remix par la communauté

• CSS Tricks avec un article de blog