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

Elemente mit „translate(-50%, -50%)“ transformieren

In der Webentwicklung kann das Zentrieren von Elementen eine häufige Aufgabe sein , insbesondere für Vollbildbilder oder Heldenabschnitte. Ein häufig verwendetes CSS-Snippet für diesen Zweck ist .item { top: 50%; links: 50 %; transform: Translate(-50%, -50%); }.

Dekonstruktion des Codes

Das Ziel dieses Codes besteht darin, die Mitte eines Elements an der Mitte seines übergeordneten Containers auszurichten. Aufteilung in seine einzelnen Bestandteile:

• oben: 50 %; left: 50 %;: Dadurch wird die obere und linke Position des Elements auf 50 % der Höhe bzw. Breite des übergeordneten Elements festgelegt. Ohne Transformation würde dies die obere linke Ecke des Elements in der Mitte seines übergeordneten Elements platzieren.
• transform: Translate(-50%, -50%);: Diese Transformation verschiebt das Element sowohl in der Horizontalen nach hinten und vertikalen Richtungen um 50 % seiner eigenen Breite und Höhe. Dadurch wird die Mitte des Elements effektiv in die ursprüngliche obere linke Ecke verschoben.

Visuelle Zentrierung

Durch die Kombination dieser beiden Stilsätze wird die Mitte des Elements genau ausgerichtet die Mitte der Eltern. Diese Technik ist besonders nützlich in Fällen, in denen die Abmessungen des Elements dynamisch oder im Voraus unbekannt sind.

Beispiel aus der Praxis

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

Wenn Sie mit der Maus über das .parent-Element fahren, bewegt sich das .child::before-Element um 50 % seiner Breite nach hinten und oben und Höhe, wodurch die ursprüngliche Position des .child-Elements angezeigt wird. Dies zeigt den Effekt der Transformation: translator(-50%, -50%) bei der visuellen und mathematischen Zentrierung des Elements.

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