Warum wird translateY (-50%) benötigt, um ein Element zu zentrieren, das oben liegt: 50%?

Question 1

Ich kann sehen, dass dieser Code funktioniert, um ein Div vertikal innerhalb seines übergeordneten Elements auszurichten:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Die Frage ist warum? Mein erster Gedanke war, dass das übergeordnete Element mehr als das Ansichtsfenster umfasste. Ich habe die Höhe 100vhund Breite meines übergeordneten Ansichtsfensters gleich gemacht 100%. Das hat nicht funktioniert. Ich brauchte noch die Übersetzung oder einen negativen Randversatz. Warum brauche ich einen negativen Offset, wenn das übergeordnete Element auf gesetzt ist margin: 0;? Liegt es an einer berechneten Marge, die ich nicht berücksichtige?

Question 2

oben: 0 (Standard)

Standardmäßig befindet sich Ihr Element oben auf der Seite und oben im Element bei 0:

--------Top of Page--------
{element}


------Middle of  Page------



------Bottom of  Page------

oben: 50%

Wenn Sie es um 50% nach unten verschieben (50% der gesamten Seite), befindet sich der obere Rand des Elements an der 50% -Marke, dh das Element beginnt bei 50% und ist nicht zentriert.

--------Top of Page--------



------Middle of  Page------
{element}


------Bottom of  Page------

oben: 50%; transformieren: translateY (-50%);

Wenn sich die Oberseite des Elements auf halber Strecke befindet, können wir das Element um die Hälfte seiner eigenen Höhe nach oben verschieben, um es mit der gesamten Seite zu zentrieren. Genau das transform:translateY(-50%);macht:

--------Top of Page--------



{element}-Middle of Page---



------Bottom of  Page------

Aber warum können wir nicht einfach so etwas sagen top: 25%? Ich habe einen kurzen Ausschnitt gemacht, um Ihnen den Unterschied zu dieser Implementierung zu zeigen:

body {
  margin: 0;
}
.row {
  display: flex;
  justify-content: space-between;
}
.container {
  display: inline-block;
  margin: 5px;
  width: 200px;
  height: 200px;
  background: tomato;
}
.inner {
  position: relative;
  margin: 0 auto;
  height: 50%;
  width: 50%;
  background: #FFC4BA;
}
.inner.small {
  width: 25%;
  height: 25%;
}
.inner.big {
  width: 75%;
  height: 75%;
}
.percent {
  top: 25%
}
.transform {
  top: 50%;
  transform: translateY(-50%);
}

<b>First row </b>looks alright, but that's because the gap works well with the 25%
<div class="row">
  <div class="container">
    <div class="inner percent"></div>
  </div>
  <div class="container">
    <div class="inner transform"></div>
  </div>
</div>
<b>Second row </b>made the center square a bit smaller, and the 25% now is too high as we'd expect the bottom of the element to reach 75%
<div class="row">
  <div class="container">
    <div class="small inner percent"></div>
  </div>
  <div class="container">
    <div class="small inner transform"></div>
  </div>
</div>
<b>Third row </b>now I've made the center box big and it ends lower than 75% making 25% start too late
<div class="row">
  <div class="container">
    <div class="big inner percent"></div>
  </div>
  <div class="container">
    <div class="big inner transform"></div>
  </div>
</div>

Warum wird translateY (-50%) benötigt, um ein Element zu zentrieren, das oben liegt: 50%?

Antworten:

oben: 0 (Standard)

oben: 50%

oben: 50%; transformieren: translateY (-50%);

Was meinst du mit "Positionsverankerung"?

Wie sieht die Positionsverankerung aus?

Elternverankerung

oben

Bodenverankerung

Linke Verankerung

Richtige Verankerung

Kinderverankerung

Vertikale Ausrichtung

Horizontale Ausrichtung

Mittelverankerung