Wie erreicht „transform: translator(-50%, -50%)' eine perfekte Zentrierung in CSS?

Die Magie der Transformation: übersetzen(-50%, -50%)

Beim Umgang mit großen Bildern oder Vollbildelementen CSS-Entwickler verwenden oft einen merkwürdigen Codeausschnitt:

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

Was ist der Zweck dieses Codes und wie funktioniert er? Arbeit?

Die Transformationseigenschaft verschiebt die Position eines Elements relativ zu seinem ursprünglichen Bezugspunkt. In diesem speziellen Fall verschiebt translator(-50%, -50%) das Element sowohl auf der X- als auch auf der Y-Achse um -50 % seiner eigenen Größe.

Um zu verstehen, warum dies notwendig ist, brechen wir es auf in seine Bestandteile zerlegen:

• translateX(-50%): Verschiebt das Element um 50% seiner Breite nach links und verschiebt seinen Mittelpunkt an seinen vorherigen oberen linken Punkt Ecke.
• translateY(-50%): Verschiebt das Element um 50 % seiner Höhe nach oben und bringt den Mittelpunkt wieder zurück in die ursprüngliche obere linke Ecke.

By Wenn wir „oben und links“ auf 50 % setzen, verschieben wir zunächst die obere linke Ecke des Elements in die Mitte des übergeordneten Containers. Dadurch bleibt jedoch der Mittelpunkt des Elements von der Mitte des übergeordneten Elements versetzt.

Die Transformation: Translate(-50%, -50%) korrigiert dies, indem sie das Element um die Hälfte zurück nach links und oben verschiebt seine eigene Größe. Dadurch wird sichergestellt, dass der Mittelpunkt des Elements nun am Mittelpunkt seines übergeordneten Elements ausgerichtet ist und eine perfekte horizontale und vertikale Zentrierung erreicht wird.

Um den Effekt zu visualisieren, bewegen Sie den Mauszeiger über den folgenden Codeausschnitt:

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

Beachten Sie, wie sich der rote „Geist“ des zentrierten Elements sanft an seinen Platz bewegt, wenn Sie mit der Maus über den übergeordneten Container fahren. Dies zeigt, wie transform: Translate(-50%, -50%) verwendet wird, um eine perfekte Zentrierung in CSS zu erreichen.

Das obige ist der detaillierte Inhalt vonWie erreicht „transform: translator(-50%, -50%)' eine perfekte Zentrierung in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!