Почему translateY (-50%) необходим для центрирования элемента, который находится вверху: 50%?

Question 1

Я вижу, что этот код работает для выравнивания div по вертикали внутри его родительского элемента:

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

Вопрос в том, почему? Моя первая мысль заключалась в том, что родительский элемент охватывает не только область просмотра. Я сделал высоту родительского окна просмотра равной 100vhширине 100%. Это не сработало. Мне все еще требовался перевод или отрицательное смещение поля. Зачем мне нужно отрицательное смещение, если для родительского элемента установлено значение margin: 0;? Это из-за расчетной маржи, которую я не принимаю во внимание?

Question 2

вверху: 0 (по умолчанию)

По умолчанию ваш элемент находится вверху страницы, а верх элемента находится в 0:

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


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



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

верх: 50%

Когда вы перемещаете его вниз на 50% высоты (50% всей страницы), верх элемента оказывается на отметке 50%, то есть элемент начинается с 50% и не центрируется.

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



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


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

верх: 50%; преобразовать: translateY (-50%);

Когда верх элемента находится на полпути, мы можем переместить элемент вверх на половину его собственной высоты, чтобы центрировать его по всей странице. Это именно то, что transform:translateY(-50%);делает:

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



{element}-Middle of Page---



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

Но почему мы не можем просто сказать top: 25%или что-то в этом роде? Я сделал небольшой фрагмент, чтобы показать вам разницу с этой реализацией:

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>

Почему translateY (-50%) необходим для центрирования элемента, который находится вверху: 50%?

Ответы:

вверху: 0 (по умолчанию)

верх: 50%

верх: 50%; преобразовать: translateY (-50%);

Что вы подразумеваете под «привязкой позиции»?

Как выглядит привязка позиции?

Родительская привязка

верхний

Нижнее крепление

Левый якорь

Правое крепление

Детское закрепление

Вертикальное выравнивание

Горизонтальное выравнивание

Центральное крепление