it-swarm.com.de

Transformieren: Übersetzen (-50%, -50%)

Wenn ich mit Heldenbildern oder Vollbildern arbeite, sehe ich normalerweise Text oder Bilder mit dem folgenden CSS-Bit:

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

Kann mir jemand erklären, was dieser Code tatsächlich tut?

13

Der Grund, warum transform: translate(-50%, -50%) erforderlich ist, besteht darin, dass Mitte des Elements mit der Mitte des übergeordneten Elements ausgerichtet werden soll. In einfachen Worten kann es auf translateX(-50%) translateY(-50%) reduziert werden, was bedeutet:

  • bewege mich um 50% meiner Breite nach links, entlang der x-Achse, und
  • bewegen Sie mich entlang der y-Achse um 50% meiner Körpergröße nach oben

Dadurch wird die Mitte des Elements effektiv in die ursprüngliche linke obere Ecke verschoben. Denken Sie daran, dass Sie, wenn Sie left: 50%; top 50% Für das Element festlegen, die linke obere Ecke in die Mitte des übergeordneten Elements verschieben (was bedeutet, dass es überhaupt nicht visuell zentriert ist). Indem Sie das Element um die Hälfte seiner Breite bzw. Höhe nach links und nach oben verschieben, stellen Sie sicher, dass sein Mittelpunkt nun am Mittelpunkt des übergeordneten Elements ausgerichtet ist, sodass es optisch horizontal und vertikal zentriert ist.

Beachten Sie als Proof-of-Concept das folgende Codefragment: Bewegen Sie den Mauszeiger über das übergeordnete Element, damit sich der "Geist" des untergeordneten Elements mithilfe von transform: translate(-50%, -50%) neu positioniert:

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%);
}
<div class="parent">
  <div class="child"></div>
</div>
32
Terry