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

Comprendre la propriété CSS Transform : traduire (-50%, -50%)

Lorsque vous travaillez avec des images de héros ou des éléments en plein écran , il est courant de rencontrer du code CSS qui inclut les éléments suivants :

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

Cet extrait de code CSS soulève la question : Que fait réellement ce code faire ?

Le rôle de Translate(-50%, -50%)

Le but de la transformation : propriété Translate(-50%, -50%) consiste à traduire ou déplacer un élément vers un emplacement spécifique. Dans ce cas, l'élément est traduit dans les directions horizontale et verticale.

Traduction horizontale : traduireX(-50%)

La première partie de la traduction, translateX(-50%), déplace l'élément de 50% de sa largeur vers la gauche. Cela équivaut à déplacer le bord gauche de l'élément vers le centre de son conteneur parent.

Traduction verticale : traduireY(-50%)

La deuxième partie de la traduction , translationY(-50%), déplace l'élément de 50% de sa hauteur vers le haut. Cela équivaut à déplacer le bord supérieur de l'élément vers le centre de son conteneur parent.

Centrage de l'élément

Combiné, le translation(-50%, -50% ) déplace effectivement le centre de l'élément vers le centre de son conteneur parent. Ceci est souvent utilisé pour créer des éléments visuellement centrés à la fois horizontalement et verticalement.

Preuve de concept

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

.parent {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.child {
  width: 50px;
  height: 50px;
  background-color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Lorsque vous placez l'élément enfant à l'intérieur du parent, vous pouvez voir qu'il est centré à la fois horizontalement et verticalement. En effet, la propriété transform:translate(-50%, -50%) a déplacé le centre de l'élément enfant vers le centre du conteneur parent.

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!