web-dev-qa-db-fra.com

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

Lorsque je travaille avec des images de héros ou quoi que ce soit en plein écran, je vois généralement du texte ou des images avec le bit de CSS suivant:

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

Quelqu'un peut-il m'expliquer ce que fait réellement ce code?

htmlcsslayout
13
Theodore Steiner

La raison pour laquelle transform: translate(-50%, -50%) est requise est que vous voulez que le centre de l'élément soit aligné avec le centre de son parent. En termes simples, il peut être réduit à translateX(-50%) translateY(-50%), ce qui signifie:

  • me déplacer vers la gauche de 50% de ma largeur, le long de l'axe des x, et
  • me déplacer vers le haut de 50% de ma taille, le long de l'axe y

Cela déplace efficacement le centre de l'élément vers son coin supérieur gauche d'origine. N'oubliez pas que lorsque vous définissez left: 50%; top 50% Sur l'élément, vous déplacez son coin supérieur gauche au centre de son parent (ce qui signifie qu'il n'est pas centré visuellement du tout). En déplaçant l'élément vers la gauche et vers le haut de la moitié de sa largeur et de sa hauteur respectivement, vous êtes sûr que son centre s'aligne désormais avec le centre du parent, ce qui le rend visuellement horizontalement + verticalement centré.

À titre de preuve de concept, consultez l'extrait de code ci-dessous: survolez le parent pour que le "fantôme" de l'élément enfant se repositionne au moyen de transform: translate(-50%, -50%):

body {
  margin: 0;
  padding: p;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}
<div class="parent">
  <div class="child"></div>
</div>
32
Terry