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

Centrage en CSS est un défi notoire, truffé 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 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 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 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 que les techniques de centrage soient durables:

1. Écrasé:le centrage doit pouvoir gérer les modifications 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 zone grise est l'arrière-plan du conteneur, qui vise à centrer les éléments.
• Chaque enfant a une couleur de fond blanche afin que vous puissiez voir les effets de la technique de centrage sur les tailles de boîtes 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 du contenu

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

Il sera difficile de battre la concision de display: grid et la sténographie place-content. Comme il centre et justifie collectivement les enfants, il s'agit d'une technique de centrage efficace 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, 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. Modification: parfait.
5. Flux:parfait !

Gentle Flex est une stratégie de centrage uniquement plus fidèle. 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;
}

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

3. Autobot

1. Squish:excellent
2. Squash:excellent
3. Dupliquer:OK
4. Modification: excellent
5. Flux: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. Centre duveteux

1. Protection:mauvaise
2. Squash:mauvais
3. Dupliquer:mauvais
4. Modification: 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. Voyez notre 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, etc.

5. Pop & Plop

1. Squish:OK
2. Squash:OK
3. Dupliquer: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 sur 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 utiliser 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 associé à 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