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 detop: 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!
Vous devez vous connecter pour publier un commentaire.
La raison pour laquelle
transform: translate(-50%, -50%)
est nécessaire est parce que vous voulez le centre de l'élément à la ligne avec le centre de son parent. En termes simples, il peut être bouilli vers le bas pourtranslateX(-50%) translateY(-50%)
, ce qui signifie:Ce déplace effectivement le centre de l'élément d'origine de coin en haut à gauche. Rappelez-vous que lorsque vous définissez
left: 50%; top 50%
sur l'élément, vous vous déplacez à son coin supérieur gauche vers le centre de son parent (ce qui signifie qu'il n'est pas visuellement centrée à tous). En déplaçant l'élément arrière vers la gauche et vers le haut par la moitié de sa largeur et sa hauteur, respectivement, de vous assurer que son centre s'aligne avec le parent du centre, visuellement à l'horizontale + verticale centrée.Comme une preuve de concept, voir l'extrait de code ci-dessous: survolez le parent à cause de l'enfant de l'élément "fantôme" à se repositionner par le biais de
transform: translate(-50%, -50%)
:CSS:
HTML: