Comment « transform : translate(-50 %, -50 %) » permet-il d'obtenir un centrage parfait en CSS ?

La magie de la transformation : traduire (-50%, -50%)

Lorsque vous traitez de grandes images ou des éléments en plein écran, Les développeurs CSS emploient souvent un curieux extrait de code :

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

Quel est le but de ce code et comment fonctionne-t-il fonctionne ?

La propriété transform déplace la position d'un élément par rapport à son point de référence d'origine. Dans ce cas précis, translation(-50%, -50%) traduit l'élément sur les axes X et Y de -50% de sa propre taille.

Pour comprendre pourquoi cela est nécessaire, décomposons-le vers le bas dans ses composants :

• translateX(-50%) : décale l'élément vers la gauche de 50 % de sa largeur, déplaçant son point central vers son emplacement supérieur gauche précédent corner.
• translateY(-50%) : déplace l'élément vers le haut de 50 % de sa hauteur, ramenant à nouveau le point central au coin supérieur gauche d'origine.

By en réglant top et left à 50 %, nous déplaçons d'abord le coin supérieur gauche de l'élément vers le centre de son conteneur parent. Cependant, cela laisse le point central de l'élément décalé par rapport au centre du parent.

La transformation : translate(-50%, -50%) corrige cela en décalant l'élément vers la gauche et vers le haut de la moitié de sa propre taille. Cela garantit que le point central de l'élément est désormais aligné avec le point central de son parent, obtenant ainsi un centrage horizontal et vertical parfait.

Pour visualiser l'effet, survolez l'extrait de code suivant :

body {
  margin: 0;
  padding: 0;
}

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

Remarquez comment le "fantôme" rouge de l'élément centré se met en place en douceur lorsque vous survolez le conteneur parent. Cela montre comment transform: translate(-50%, -50%) est utilisé pour obtenir un centrage parfait en CSS.

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!