Transformer: translate(-50%, -50%)

Lorsque vous travaillez avec des héros images ou plein écran quelque chose, en général, je vois du texte ou des images avec le bit suivant de css:

.item {
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

Quelqu'un peut m'expliquer ce que ce code est en train de faire?

  • C'est une belle façon de centrage de l'élément en lieu et place de l'utilisation de la marge, si nous ne connaissons pas la hauteur et la largeur du conteneur
  • Ce que je sais, et, en théorie, je comprends le concept de déplacer quelque chose en haut et à gauche de 50%, mais le négatif revenir avec la transformation, seriez-vous capable de chair, un peu pour moi?
  • Le -50% transformer fondamentalement signifie, en termes simples, "déplacer cet élément de gauche et à la hausse de 50% de la dimension calculée le long de l'axe". -50% le long de l'axe des x signifie "me déplacer vers la gauche par la moitié de ma largeur calculée", de même pour l'axe des y de. La raison pour laquelle cela est nécessaire, c'est parce que lors de la configuration de top: 50%; left: 50% de l'élément, que vous déplacez le coin supérieur gauche de l'élément au centre de sa mère. Le centre de l'élément, cependant, n'est pas en ligne avec le centre de ses parents.
  • Merci Terry, qui a vraiment effacé pour moi! Si vous souhaitez vous lancer dans une réelle réponse, je vais le marquer comme réponse/corriger.
  • Vous êtes les bienvenus! J'ai également mis à jour ma réponse avec un exemple, interactif exemple, de sorte que vous pouvez voir ce qui se passe "derrière les coulisses" 🙂
  • J'apprécie vraiment que Terry, si vous avez effacé les choses infiniment pour moi!