Чому 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%);

Що ви маєте на увазі під "закріпленням позиції"?

Як виглядає закріплення позиції?

Закріплення батьків

Топ

Нижнє закріплення

Лівий анкер

Правильне закріплення

Закріплення дитини

Вертикальне вирівнювання

Горизонтальне вирівнювання

Центр закріплення