Comment « transform : translate(-50 %, -50 %) » centre-t-il un élément ?

Comprendre le rôle de « Transformer : traduire (-50 %, -50%) »

Lorsque vous travaillez avec des images de héros ou des éléments qui s'étend sur tout l'écran, il est courant de rencontrer du code CSS comme :

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

Mais à quoi sert réellement ce code accomplir ?

La clé pour comprendre ce code est de reconnaître qu'il aligne le centre de l'élément avec le centre de son parent. Ceci est réalisé par :

• translateX(-50%) : Déplace l'élément vers la gauche de 50 % de sa largeur, le centrant efficacement le long de l'axe x.
• translateY(-50%) : Déplace l'élément vers le haut de 50 % de sa hauteur, en le centrant le long du axe y.

En déplaçant l'élément vers la gauche et vers le haut de la moitié de sa largeur et de sa hauteur, le centre de l'élément est aligné avec le centre de son parent, obtenant ainsi un centrage horizontal et vertical.

Pour illustrer cela, considérons l'extrait de code suivant :

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%);
}

Lorsque vous survolez l'élément parent, l'élément fantôme (.child::before) devient visuellement centré en appliquant la propriété transform:translate(-50%, -50%).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!