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

Verstehen der CSS-Transformationseigenschaft: Translate(-50%, -50%)

Bei der Arbeit mit Heldenbildern oder Vollbildelementen , stößt man häufig auf CSS-Code, der Folgendes enthält:

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

Dieses CSS-Snippet wirft die Frage auf: Was macht dieser Code? tatsächlich tun?

Die Rolle von Translate(-50%, -50%)

Der Zweck der Transformation: Translate(-50%, -50%) Die Eigenschaft besteht darin, ein Element an eine bestimmte Position zu verschieben oder zu verschieben. In diesem Fall wird das Element sowohl in horizontaler als auch in vertikaler Richtung übersetzt.

Horizontale Übersetzung: translatorX(-50%)

Der erste Teil der Übersetzung, translatorX(-50%) verschiebt das Element um 50% seiner Breite nach links. Dies entspricht dem Verschieben der linken Kante des Elements in die Mitte seines übergeordneten Containers.

Vertikale Übersetzung: translatorY(-50%)

Der zweite Teil der Übersetzung , translatorY(-50 %), verschiebt das Element um 50 % seiner Höhe nach oben. Dies entspricht dem Verschieben der Oberkante des Elements in die Mitte seines übergeordneten Containers.

Zentrieren des Elements

In Kombination ergeben die translator(-50%, -50% ) verschiebt effektiv die Mitte des Elements in die Mitte seines übergeordneten Containers. Dies wird häufig verwendet, um Elemente zu erstellen, die sowohl horizontal als auch vertikal visuell zentriert sind.

Proof of Concept

Um das Konzept zu veranschaulichen, betrachten Sie den folgenden Codeausschnitt:

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

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

Wenn Sie das untergeordnete Element innerhalb des übergeordneten Elements platzieren, können Sie sehen, dass es sowohl horizontal als auch vertikal zentriert ist. Dies liegt daran, dass die Eigenschaft transform: translator(-50%, -50%) die Mitte des untergeordneten Elements in die Mitte des übergeordneten Containers verschoben hat.

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