Wie zentriert „transform: translator(-50%, -50%)' ein Element?

Verstehen der Rolle von „Transformieren: übersetzen (-50 %, -50 %)“

Bei der Arbeit mit Heldenbildern oder Elementen, die Wenn sich ein Code über den gesamten Bildschirm erstreckt, stößt man häufig auf CSS-Code wie:

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

Aber was macht dieser Code eigentlich? erreichen?

Der Schlüssel zum Verständnis dieses Codes besteht darin, zu erkennen, dass er die Mitte des Elements an der Mitte seines übergeordneten Elements ausrichtet. Dies wird erreicht durch:

• translateX(-50%): Verschiebt das Element um 50 % seiner Breite nach links und zentriert es effektiv entlang der x-Achse.
• translateY(-50%): Verschiebt das Element um 50 % seiner Höhe nach oben und zentriert es entlang der y-Achse.

Durch Verschieben des Elements nach links und oben um die Hälfte seiner Breite und Höhe wird die Mitte des Elements an der Mitte seines übergeordneten Elements ausgerichtet, wodurch sowohl eine horizontale als auch eine vertikale Zentrierung erreicht wird.

Um dies zu veranschaulichen, betrachten Sie den folgenden Codeausschnitt:

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

Wenn Sie mit der Maus über das übergeordnete Element fahren, wird das Geisterelement angezeigt (.child::before) wird durch Anwenden der Eigenschaft transform: Translate(-50%, -50%) visuell zentriert.

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