De la difficulté de centrer des trucs dans d'autres trucs. Délicieux à lire 🤗

Comme toujours, un article passionnant de Josh Comeau qui explore les différentes façon de centrer un élément HTML en CSS. Didactique et plein de petites astuces très utiles. Vous allez presque obligatoirement apprendre quelque chose 😉

max-width: fit-content; 😍

Attention quand vous faites une modale centrée horizontalement et verticalement avec Flexbox. Si le contenu de la modale est plus grand que le container, le centrage va tronquer le contenu.

L'astuce est d'appliquer ce CSS sur les flex items :

.your-flex-items {
  margin-top: auto;
  margin-bottom: auto;
}

En principe, un simple margin: auto devrait fonctionner mais ça a causé des bugs avec IE chez moi. D'ailleurs pour que ça fonctionne correctement avec IE (voir les commentaires en dessous du post), il faut appliquer align-items: flex-start au lieu de center sur le container.

Un outil pas à pas qui aide à centrer du contenu en CSS. Il génère le code en fonction des différente contraintes que l'on sélectionne (comme la compatibilité IE par exemple).
Inutile pour les vrais pros du CSS mais ça peut toujours faire gagner du temps quand on a plus en tête tous les cas possibles.

Via https://blog.stephaniewalter.fr/la-semaine-en-pixels-27-mai-2016/