Centrer en CSS

Suivez cinq techniques de centrage à mesure qu'elles effectuent une série de tests pour déterminer laquelle est la plus résistante au changement.

Adam Argyle

Le centrage dans CSS est un défi notoire, truffé de blagues et de moqueries. 2020 Les CSS sont devenus des adultes. Aujourd'hui, on peut bien rigoler de ces blagues, sans grignoter les dents.

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

Problématique

Il existe différents types de centrage. Différents cas d'utilisation, nombre d'éléments à centrer, etc. Afin d'expliquer pourquoi une technique de centrage est efficace, j'ai créé The Resilience Ringer. Il s'agit d'une série de tests de contrainte pour équilibrer chaque stratégie de centrage et pour vous permettre d'observer leurs performances. À la fin, je révèle la technique du score le plus élevé et celle qui donne le plus de points. Nous espérons que vous repartirez avec de nouvelles techniques et solutions de centrage.

Resilience Ringer

"Resilience Ringer" est une représentation de 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. Écrasé:le centrage doit pouvoir gérer les changements de largeur.
2. Écrasé:le centrage doit pouvoir gérer les changements de hauteur.
3. Doublon:le centrage doit être dynamique par rapport au 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 dans l'orientation du document et indépendamment du mode d'écriture.

La solution gagnante doit démontrer sa résilience en maintenant le contenu au centre tout en étant écrasé, écrasé, dupliqué, modifié et basculé vers différents modes de langage et directions. Centre fiable et résilient, un centre sécurisé.

Légende

J'ai fourni des indications visuelles de couleur pour vous aider à garder certaines méta-informations 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 une couleur d'arrière-plan blanche pour que vous puissiez voir les effets de la technique de centrage sur la taille des zones enfants (le cas échéant).

Les cinq participants

5 techniques de centrage font leur apparition dans la sonnerie de résilience, et une seule obtient la couronne de résilience ᐧ.

1. Centre de contenu

1. Squish: super !
2. Squash: super !
3. Doublon: c'est parfait !
4. Modification: Parfait !
5. Parcours: excellent !

La concision de display: grid et le raccourci de place-content seront difficiles à battre. Puisqu'il centre et justifie collectivement les enfants, 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 avec macro contenant des paragraphes et des titres, des prototypes ou, en général, des éléments qui nécessitent un centrage lisible.

2. Gentle Flex

1. Squish:super !
2. Squash:super !
3. Doublon:excellent !
4. Modification:c'est parfait !
5. Flux:excellent !

Gentle Flex est une stratégie centrée uniquement sur le centrage. Il est doux et doux, car contrairement à place-content: center, la taille des boîtes pour enfants n'est pas modifiée pendant le centrage. Avec le plus de douceur possible, tous les éléments sont empilés, centrés et espacés.

.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. Autobot

1. Squish:excellent
2. Squash:excellent
3. Doublon:bon
4. Modification:excellent
5. Flux:excellent

Le conteneur est configuré pour être flexible sans style d'alignement, tandis que les éléments enfants directs sont stylisés avec des marges automatiques. Il y a une chose de nostalgique et de merveilleux dans le fait que margin: auto fonctionne de toutes les facettes.

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

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

4. Fluffy Center

1. Squish:mauvais
2. Squash:mauvais
3. Doublon:incorrect
4. Modification:c'est parfait !
5. Flux:excellent ! (tant que vous utilisez des propriétés logiques)

Le concours "Fruits Center" est de loin notre concurrent le plus savoureux, et c'est la seule technique de centrage qui soit entièrement détenue par un élément/enfant. Voyez notre solo de bordure rose !?

.fluffy-center {
  padding: 10ch;
}

Parfait pour les méthodes de centrage centrée sur les mots ou les expressions, les balises, les éléments comprimés, les boutons, les chips, etc.

5. Pop et plop

1. Squish (Squish) : OK
2. Squash:OK
3. Doublon:incorrect
4. Modification:bien
5. Flow (flux) : fin

Cette valeur "survient" parce que le positionnement absolu fait sortir l'élément du flux normal. La partie « plop » des noms vient du moment que je trouve le plus utile : la recouvrir sur d’autres choses. Il s'agit d'une technique de centrage classique et pratique en superposition, flexible et dynamique en fonction de la taille du contenu. Parfois, il suffit de placer l'UI sur une autre UI.

Parfait pour les fenêtres modales, les toasts, les messages, les piles, les effets de profondeur et les pop-overs.

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 pouvez toujours le trouver dans mes feuilles de style, car il est utile pour les mises en page avec macro et micro. C'est une solution fiable et complète dont les résultats correspondent à mes attentes. De plus, comme je suis un accro à la taille, j'ai tendance à passer à cette solution. Vrai, cela fait beaucoup de texte, mais les avantages qu'il offre compensent l'utilisation de code supplémentaire.

Produit minimum viable

Volcanique

.fluffy-center {
  padding: 2ch;
}

Fluffy Center est si micro qu'il est facile de l'omettre comme une technique de centrage, mais c'est un élément essentiel de mes stratégies de centrage. C'est si atomique que parfois j'oublie que je l'utilise.

Conclusion

Quels types d'éléments perturbent vos stratégies de centrage ? Quels autres défis pourraient être ajoutés à la sonnerie de la résilience ? J'ai envisagé la translation et un bouton de hauteur automatique sur le conteneur. Quoi d'autre ?

Maintenant que tu sais comment j'ai fait, comment tu en ferais ?! Diversifions nos approches et apprenons 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 votre version, et je l'ajouterai à la section Remix de la communauté ci-dessous.

Remix de la communauté

• Astuces CSS avec un article de blog