Comment `translate(-50%, -50%)` obtient-il un centrage parfait en CSS ?

Transformer des éléments avec "translate(-50%, -50%)"

Dans le développement Web, centrer les éléments peut être une tâche courante , en particulier pour les images plein écran ou les sections de héros. Un extrait CSS fréquemment utilisé à cette fin est .item { top: 50%; gauche : 50 % ; transformer : traduire (-50 %, -50 %); }.

Déconstruire le code

Le but de ce code est d'aligner le centre d'un élément avec le centre de son conteneur parent. En le décomposant en ses composants individuels :

• haut : 50 % ; left: 50%; : Ceci définit les positions supérieure et gauche de l'élément à 50 % de la hauteur et de la largeur du parent, respectivement. Sans transformation, cela placerait le coin supérieur gauche de l'élément au centre de son parent.
• transform: translation(-50%, -50%); : Cette transformation décale l'élément vers l'arrière à la fois horizontalement et les directions verticales de 50 % de sa propre largeur et hauteur. Cela déplace efficacement le centre de l'élément vers le coin supérieur gauche d'origine.

Centrage visuel

En combinant ces deux ensembles de styles, le centre de l'élément s'aligne précisément avec le centre des parents. Cette technique est particulièrement utile dans les cas où les dimensions de l'élément sont dynamiques ou inconnues à l'avance.

Exemple concret

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

Lorsque vous survolez l'élément .parent, l'élément .child::before se déplace vers l'arrière et vers le haut de 50 % de sa largeur et hauteur, révélant la position d'origine de l'élément .child. Cela démontre l'effet de la transformation : translate(-50%, -50%) sur le centrage de l'élément à la fois visuellement et mathématiquement.

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!