Centrer en CSS

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

Adam Argyle

Le centrage en CSS est un défi notoire, source de blagues et de moqueries. Le CSS de 2020 est bien grandi, et nous pouvons désormais rire de ces blagues avec sincérité, et non en serrant les dents.

Si vous préférez regarder une vidéo, 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 illustrer 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 résistance pour chaque stratégie de centrage afin de l'équilibrer et de vous permettre d'observer ses performances. À la fin, je révèle la technique qui a obtenu le score le plus élevé, ainsi que la "plus intéressante". Nous espérons que vous repartirez avec de nouvelles techniques et solutions de centrage.

Sonnerie de résilience

Le Ringer de résilience reflète ma conviction selon laquelle 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 que les techniques de centrage soient durables:

1. Écraché:le centrage doit pouvoir gérer les changements de largeur.
2. Aplatissement: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. Modification:le centrage doit être dynamique en fonction de la longueur et de la langue du contenu
5. Flux:le centrage doit être indépendant de l'orientation 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 remplacé dans différents modes et directions de langue. Un centre fiable et résilient, un centre sûr.

Légende

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

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

Les cinq participants

Cinq techniques de centrage entrent dans le sonnerie de résilience. Une seule recevra la couronne de résilience 👸.

1. Centre de contenu

1. Squish: Parfait.
2. Squash: parfait.
3. Dupliquer: parfait !
4. Modification: Parfait !
5. Flux: parfait.

Il sera difficile de battre la concision de display: grid et la sténographie place-content. Étant donné qu'il centre et justifie collectivement les enfants, il s'agit d'une technique de centrage solide pour des 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, des prototypes ou, de manière générale, des éléments qui doivent être centrés de manière lisible.

2. Gentle Flex

1. Squish:parfait !
2. Squash:parfait !
3. Dupliquer:parfait !
4. Edit: parfait !
5. Flux:parfait !

Gentle Flex est une stratégie qui se consacre uniquement au centrage. Il est doux et délicat, 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;
}

Parfait pour les mises en page macro et micro.

3. Autobots

1. Squish:excellent
2. Squash:excellent
3. Dupliquer:OK
4. Modification: excellent
5. Parcours:excellent

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 que margin: auto fonctionne sur tous les côtés de l'élément.

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

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

4. Fluffy Center

1. Squish:mauvais
2. Squash:mauvais
3. Dupliquer:mauvais
4. Modifier:parfait !
5. Flux:parfait ! (à condition d'utiliser des propriétés logiques)

Le concurrent "centre moelleux" est de loin notre concurrent le plus savoureux. Il s'agit de la seule technique de centrage entièrement détenue par l'élément/l'enfant. Vous voyez notre bordure intérieure rose ?

.fluffy-center {
  padding: 10ch;
}

Parfait pour les centrages axés sur les mots ou les expressions, les tags, les pilules, les boutons, les chips, etc.

5. Pop &Plop

1. Squish:d'accord
2. Squash:OK
3. Doublon:mauvais
4. Modification: OK
5. Flux:correct

Cette "pop" s'affiche, car le positionnement absolu fait sortir l'élément du flux normal. Le nom "plop" vient de l'utilisation la plus utile que je trouve pour ces éléments : les placer sur d'autres éléments. Il s'agit d'une technique de centrage de superposition classique et pratique, flexible et dynamique en fonction de la taille du contenu. Parfois, il vous suffit de placer l'UI au-dessus d'une autre UI.

Idéal pour les boîtes de dialogue modales, les notifications et les messages, les piles et les effets de profondeur, les popovers.

Le gagnant

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

[roulement de tambour]

Flex doux 🎉

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

Vous pouvez toujours le trouver dans mes feuilles de style, car il est utile à la fois pour les mises en page macro et micro. C'est une solution fiable dans son ensemble, avec des résultats qui correspondent à mes attentes. De plus, comme je suis un accro à la mise à l'échelle intrinsèque, j'ai tendance à passer à cette solution. Certes, c'est beaucoup de frappe, mais les avantages qu'il offre l'emportent sur le code supplémentaire.

MVP

Centre du duvet

.fluffy-center {
  padding: 2ch;
}

Le centre flou est si micro que l'on peut facilement passer à côté de cette technique de centrage, mais c'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 peuvent perturber vos stratégies de centrage ? Quels autres défis pourraient être ajoutés à la sonnerie de résilience ? J'ai envisagé la traduction et un bouton de hauteur automatique sur le conteneur. Que faire d'autre ?

Maintenant que vous savez comment j'ai fait, comment pourriez-vous faire ? 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 présentés dans cet article. Envoyez-moi votre version par tweet. Je l'ajouterai à la section Remix de la communauté ci-dessous.

Remix de la communauté

• CSS Tricks avec un article de blog