¿Por qué se necesita translateY (-50%) para centrar un elemento que está en la parte superior: 50%?

Question 1

Puedo ver que este código funciona para alinear un div verticalmente dentro de su elemento padre:

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

La pregunta es ¿por qué? Mi primer pensamiento fue que el elemento padre abarcaba más que la ventana gráfica. Hice que la altura 100vhy el ancho de la ventana gráfica de mi padre fueran iguales 100%. Eso no funcionó. Todavía necesitaba la traducción o una compensación de margen negativo. ¿Por qué necesito un desplazamiento negativo cuando el elemento principal está configurado en margin: 0;? ¿Es por un margen calculado que no estoy tomando en cuenta?

Question 2

top: 0 (predeterminado)

De forma predeterminada, su elemento está en la parte superior de la página y la parte superior del elemento está en 0:

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


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



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

arriba: 50%

Cuando lo mueve hacia abajo en un 50% de altura (50% de toda la página), la parte superior del elemento está en la marca del 50%, lo que significa que el elemento comienza en el 50% y no está centrado.

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



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


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

arriba: 50%; transformar: translateY (-50%);

Cuando la parte superior del elemento está a la mitad, podemos mover el elemento hacia arriba a la mitad de su propia altura para centrarlo con toda la página. Eso es exactamente lo que transform:translateY(-50%);hace:

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



{element}-Middle of Page---



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

Pero, ¿por qué no podemos simplemente decir top: 25%algo así? Hice un fragmento rápido para mostrarle la diferencia con esa implementación:

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>

¿Por qué se necesita translateY (-50%) para centrar un elemento que está en la parte superior: 50%?

Respuestas:

top: 0 (predeterminado)

arriba: 50%

arriba: 50%; transformar: translateY (-50%);

¿Qué quieres decir con "anclaje de posición"?

¿Cómo se ve el anclaje de posición?

Anclaje de los padres

Parte superior

Anclaje inferior

Anclaje a la izquierda

Anclaje correcto

Anclaje infantil

Alineamiento vertical

Alineación horizontal

Anclaje central