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

Le centrage dans CSS est un défi connu, truffé de blagues et de moqueries. 2020 Le CSS est un spécialiste, et maintenant on peut rire de ses blagues, honnêtement, dents serrées.

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

Problématique

Il existe différents types de centrage. Des cas d'utilisation différents, un certain nombre d'éléments au centre, etc. Pour démontrer l'intérêt d'une stratégie de centrage, créé The Resilience Ringer. Il s'agit d'une série de tests de contrainte pour chaque pour trouver un équilibre et observer leurs performances. À la fin, je révèle la technique ayant obtenu le score le plus élevé, ainsi que la technique "la plus utile". Nous espérons que vous en repartirez avec de nouvelles techniques et solutions de centrage.

The Resilience Ringer

Le Ringer de résilience est une représentation de mes croyances qu'un doit être résiliente aux mises en page internationales, aux fenêtres d'affichage de taille variable, au montage de texte et aux éléments dynamiques de votre contenu. Ces principes ont contribué à façonner les tests de résilience suivants pour le techniques de centrage pour résister:

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

La solution gagnante doit démontrer sa résilience en gardant le contenu centré tout en étant écrasé, écrasé, dupliqué, modifié et échangé sur différents modes de langage et directions. C'est un centre de confiance fiable et résilient.

Légende

Voici quelques indications visuelles pour vous aider à conserver certaines méta-informations. en contexte:

• Une bordure rose indique que vous êtes propriétaire des styles de centrage
• La zone grise correspond à l'arrière-plan du conteneur, qui cherche à être centré éléments
• Chaque enfant est doté d'un arrière-plan blanc, ce qui vous permet de voir tous les effets de centrage appliqué aux tailles de zone enfant (le cas échéant)

Les cinq participants

Cinq techniques de centrage entrent dans l'anneau de résilience, une seule recevra le Couronne de résilience .

1. Centre de contenu

Modifier et dupliquer du contenu avec VisBug

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

Il sera difficile de faire mieux que la concision de display: grid et Raccourci place-content. Puisqu'elle centre et justifie collectivement les enfants, c'est une technique de centrage solide 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épassement de capacité
• Les modifications et la maintenance du centrage sont centralisées
• L'écart garantit un espacement égal entre 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 éléments. Ce sera Pour en savoir plus, consultez la section Gentle Flex.

Parfaite pour les mises en page macro contenant des paragraphes, des titres, des prototypes ou généralement des éléments qui doivent être centrés de façon lisible.

Remarque : place-content n'est pas exclusif à display: grid. display: flex peut également bénéficier des raccourcis place-content et place-item.

2. Gentle flex

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

Gentle Flex est une stratégie qui se consacre uniquement au centrage. Il est doux et doux, car contrairement à place-content: center, la taille des boîtes pour enfants n'est pas modifiée lors de la et un centrage. Aussi délicatement que 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;
}

Avantages

• Gère uniquement l'alignement, la direction et la distribution
• Modifications et maintenance centralisées
• L'écart garantit un espacement égal entre n enfants

Inconvénients

• La plupart des lignes de code

Parfait pour les mises en page macro et micro.

Terme clé : les mises en page macro correspondent aux États ou territoires d'un pays, c'est-à-dire à des zones de couverture de très haut niveau. Les zones créées par des mises en page macro ont tendance à contenir davantage de mises en page. Moins la mise en page est recouverte de surface, moins la mise en page macro est limitée. Étant donné qu'une mise en page couvre moins de surface ou contient moins de mises en page, elle devient plutôt de type micro.

3. Autobots

1. Squish:génial
2. Squash:parfait
3. Doublon:correct
4. Modifier:parfait
5. Parcours:excellent

Le conteneur est configuré sur une configuration flexible, sans style d'alignement, tandis que les éléments enfants directs sont stylisés avec des marges automatiques. Il y a quelque chose de nostalgique et de merveilleux dans margin: auto opère sur tous les côtés de l'élément.

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

Avantages

• Astuce amusante
• Rapide et sale

Inconvénients

• Résultats gênants en cas de dépassement
• Recours à une distribution plutôt qu'à un écart signifie que les mises en page peuvent avoir lieu avec des enfants côtés touchants
• Se faire "pousser" en position ne semble pas optimale et peut entraîner un changement à la taille de la boîte de l'enfant

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

4. Fluffy Center

1. Squish:mauvais
2. Squash:mauvais
3. Doublon:mauvais
4. Modifier:parfait !
5. Parcours:parfait ! (tant que vous utilisez des propriétés logiques)

Participant au "centre duveteux" est de loin notre meilleure consonance. C'est aussi la seule de centrage entièrement détenue par l'élément ou l'enfant. Admirez notre solo en rose bordure !?

.fluffy-center {
  padding: 10ch;
}

Avantages

• Protection du contenu
• Nucléaire
• Chaque test contient secrètement cette stratégie de centrage
• L'espace entre les mots est un écart

Inconvénients

• Illusion d'être inutile
• Il y a un conflit entre le conteneur et les objets, naturellement, puisque chacun des tailles très fermes

Parfait pour les centrages axés sur un mot ou une expression, des tags, des pilules, des boutons, des chips et plus encore.

5. Pop et Plop

1. Squish:d'accord
2. Squash:OK
3. Doublon:mauvais
4. Modification:acceptable
5. Parcours:fin

Ce boulot qui éclate car le positionnement absolu fait sortir l'élément de la normale le flux de travail. Le "plop" une partie des noms vient du moment où je le trouve le plus utile: en la posant sur d'autres choses. Il s'agit d'une technique classique et pratique flexible et dynamique en fonction de la taille du contenu. Parfois, vous avez juste besoin pour placer l'UI par-dessus une autre UI.

Avantages

• Utile
• Fiable
• Quand vous en avez besoin, c'est un outil inestimable

Inconvénients

• Code avec des valeurs de pourcentage négatives
• Nécessite position: relative pour forcer un bloc conteneur
• Sauts de ligne précoces et gênants
• Il ne peut y en avoir qu'un seul par bloc conteneur sans effort supplémentaire.

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

Gagnant

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

[drum roll]

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 à la fois pour les macros de micro-mises en page. Il s'agit d'une solution fiable et globale dont les résultats correspondent à vos attentes. De plus, comme je suis un accro aux dimensionnements intrinsèques, j'ai tendance à être diplômé dans cette solution. Certes, cela demande beaucoup de travail, mais les avantages qu'elle offre l'emporte sur le code supplémentaire.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

La technique de centrage du Fluffy Center est tellement micrographique qu'il est facile de l'oublier. mais c'est un élément essentiel de mes stratégies de centrage. C'est si atomique que parfois, oublie que je l'utilise.

Conclusion

Quels types d'éléments rompent vos stratégies de centrage ? Quels autres défis à la sonnerie de résilience ? J'ai envisagé la traduction et un changement automatique de hauteur sur le conteneur... Quoi d'autre ?

Maintenant que tu sais comment j'ai fait, comment faire ?! Diversifiez nos approches et découvrir toutes les façons de créer sur le Web. Suivez l'atelier de programmation avec ce post pour : créez votre propre exemple de centrage, comme ceux de cet article. Tweeter moi votre version, et je l'ajoute au fichier Remix de la communauté ci-dessous.

Remix de la communauté

• Astuces CSS avec un article de blog