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.

Centrage en CSS est un défi notoire, truffé de blagues et de moqueries. Le CSS de 2020 est tout à fait adulte, 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 utile". 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, tout en étant compressé, écrasé, dupliqué, modifié et échangé 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

Modifier et dupliquer du contenu avec VisBug
  1. Squish: Parfait.
  2. Squash: parfait.
  3. Dupliquer: parfait.
  4. Edit (Modifier) : 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;
}
Avantages
  • Le contenu est centré, même en cas d'espace limité et de débordement
  • Les modifications et la maintenance sont toutes regroupées au même endroit.
  • L'espacement garantit un espacement égal entre les n enfants.
  • La grille crée des lignes par défaut
Inconvénients
  • L'élément enfant le plus large (max-content) définit la largeur pour tous les autres. Ce point sera abordé plus en détail dans Flexibilité douce.

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;
}
Avantages
  • Ne gère que l'alignement, l'orientation et la distribution
  • Les modifications et la maintenance sont toutes au même endroit
  • L'espacement garantit un espacement égal entre les n enfants.
Inconvénients
  • Nombre le plus élevé de lignes de code

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;
}
Avantages
  • Idée amusante
  • Rapide et sale
Inconvénients
  • Résultats inappropriés en cas de débordement
  • Le recours à la distribution plutôt qu'à l'espacement signifie que des mises en page peuvent se produire avec des enfants touchant les côtés.
  • Le fait d'être"poussé" dans la position ne semble pas optimal et peut entraîner une modification de la taille de la zone de l'enfant.

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. Vous voyez notre bordure intérieure rose ?

.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 espace
Inconvénients
  • Illusion d'inutilité
  • Il y a un conflit entre le conteneur et les éléments, naturellement, car chacun est très strict sur sa taille.

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.

Avantages
  • Utile
  • Fiable
  • Elle est indispensable quand vous en avez besoin
Inconvénients
  • Code avec des valeurs de pourcentage négatives
  • Nécessite position: relative pour forcer un bloc contenant
  • Sauts de ligne anticipés et maladroits
  • Il ne peut y en avoir qu'un seul par bloc contenant sans effort supplémentaire.

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, et je l'ajouterai à la section Remix de la communauté ci-dessous.

Remix de la communauté