Centrer en CSS

Suivez cinq techniques de centrage lors d'une série de tests pour déterminer laquelle est la plus résistante au changement.

Adam Argyle

La mise au centre en CSS est un défi notoire, qui fait l'objet de blagues et de moqueries. En 2020, les CSS ont bien grandi. Nous pouvons désormais rire de ces blagues honnêtement, et non à pleines dents.

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

Problématique

Il existe différents types de centrage. (différents cas d'utilisation, nombre d'éléments à centrer, etc.). Pour démontrer la logique derrière une technique de centrage "gagnante", j'ai créé The Resilience Ringer. Il s'agit d'une série de tests de contrainte pour chaque stratégie de centrage afin de trouver un équilibre et d'observer leurs performances. À la fin, je vous révélerai la technique ayant obtenu le meilleur score, ainsi que la plus utile. Nous espérons que vous avez appris de nouvelles techniques et solutions de centrage.

La cloche de la résilience

La sonnerie de résilience représente ma conviction qu'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 contribué à façonner les tests de résilience suivants pour les techniques de centrage :

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. Dupliquer : le centrage doit être dynamique en fonction du nombre d'éléments
4. Modifier : Le centrage doit être dynamique en fonction de la longueur et de la langue du contenu.
5. Flow : le centrage doit être indépendant du sens de lecture et du mode d'écriture du document

La solution gagnante doit faire preuve de résilience en gardant le contenu au centre tout en étant compressé, écrasé, dupliqué, modifié et permuté dans différents modes et directions linguistiques. Un centre fiable, résilient et sécurisé.

Légende

J'ai fourni quelques indications visuelles de couleur pour vous aider à conserver certaines métadonnées dans leur contexte :

• Une bordure rose indique la propriété des styles de centrage.
• La boîte grise correspond à l'arrière-plan du conteneur qui vise à centrer les éléments.
• Chaque enfant a une couleur de fond blanche pour que vous puissiez voir les effets de la technique de centrage sur la taille des boîtes enfants (le cas échéant).

Les cinq candidats

Cinq techniques de centrage s'affrontent dans le Ring de la résilience, mais une seule remportera la Couronne de la résilience 👸.

1. Centre de contenu

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

Il sera difficile de faire mieux que la concision de display: grid et de l'abréviation place-content. Comme il centre et justifie les enfants collectivement, il s'agit d'une technique de centrage solide pour les groupes d'éléments destinés à être lus.

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

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

2. Gentle Flex

1. Protection : parfait !
2. Squash : parfait !
3. Doublon : parfait !
4. Modifier : super !
5. Flow : parfait !

Gentle Flex est une stratégie de centrage uniquement. Elle est douce et délicate, car contrairement à place-content: center, aucune taille de boîte enfant n'est modifiée lors du 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;
}

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

3. Autobot

1. Protection : très bien
2. Squash : excellent
3. Doublon : correct
4. Modifier : super
5. Fluidité : excellente

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

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

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

4. Fluffy Center

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

Le candidat "centre moelleux" est de loin le plus appétissant, et c'est la seule technique de centrage qui appartient entièrement à l'élément/enfant. Vous voyez la bordure intérieure rose ?

.fluffy-center {
  padding: 10ch;
}

Idéal pour centrer des mots ou des expressions, des tags, des pilules, des boutons, des chips et plus encore.

5. Pop &Plop

1. Squish : OK
2. Squash : OK
3. Doublon : mauvais
4. Modifier : bien
5. Fluidité : correcte

Cela se produit, car le positionnement absolu sort l'élément du flux normal. La partie "plop" des noms vient du moment où je le trouve le plus utile : le déposer sur d'autres choses. Il s'agit d'une technique de superposition classique et pratique qui permet de centrer le contenu de manière flexible et dynamique en fonction de sa taille. Parfois, vous avez juste besoin de placer une UI au-dessus d'une autre.

Idéal pour les modaux, les toasts et les messages, les piles et les effets de profondeur, les pop-ups.

Le gagnant

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

[roulement de tambour]

Gentle Flex 🎉

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

Vous le trouverez toujours dans mes feuilles de style, car il est utile pour les mises en page macro et micro. C'est une solution fiable qui donne des résultats conformes à mes attentes. De plus, comme je suis un fan de dimensionnement intrinsèque, j'ai tendance à passer à cette solution. Certes, il y a beaucoup à taper, mais les avantages qu'il offre l'emportent sur le code supplémentaire.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center est une technique de centrage si micro qu'il est facile de la négliger, mais elle est un élément essentiel de mes stratégies de centrage. Il est tellement atomique que j'oublie parfois que je l'utilise.

Conclusion

Quels types de choses perturbent vos stratégies de centrage ? Quels autres défis pourraient être ajoutés à l'anneau de résilience ? J'ai envisagé une traduction et un changement 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 avec 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 de la communauté

• CSS Tricks avec un article de blog