Dlaczego translateY (-50%) jest potrzebne do wyśrodkowania elementu znajdującego się na górze: 50%?

Question 1

Widzę, że ten kod działa, aby wyrównać div pionowo w swoim elemencie nadrzędnym:

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

Pytanie brzmi: dlaczego? W pierwszej chwili pomyślałem, że element nadrzędny obejmuje więcej niż widok. Wyrównałem wysokość 100vhi szerokość mojego nadrzędnego rzutni 100%. To nie zadziałało. Nadal potrzebowałem tłumaczenia lub ujemnego przesunięcia depozytu zabezpieczającego. Dlaczego potrzebuję ujemnego przesunięcia, gdy element nadrzędny jest ustawiony na margin: 0;? Czy to z powodu obliczonej marży, której nie biorę pod uwagę?

Question 2

góra: 0 (domyślnie)

Domyślnie Twój element znajduje się na górze strony, a na górze elementu jest 0:

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


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



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

góra: 50%

Kiedy przesuniesz go w dół o 50% wysokości (50% całej strony), górna część elementu znajduje się na znaku 50%, co oznacza, że element zaczyna się od 50% i nie jest wyśrodkowany.

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



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


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

góra: 50%; transform: translateY (-50%);

Kiedy górna część elementu znajduje się w połowie, możemy przesunąć element z powrotem o połowę jego wysokości, aby wyśrodkować go na całej stronie. Dokładnie to transform:translateY(-50%);robi:

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



{element}-Middle of Page---



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

Ale dlaczego nie możemy po prostu powiedzieć top: 25%lub coś takiego? Zrobiłem krótki fragment, aby pokazać różnicę w tej implementacji:

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>

Dlaczego translateY (-50%) jest potrzebne do wyśrodkowania elementu znajdującego się na górze: 50%?

góra: 0 (domyślnie)

góra: 50%

góra: 50%; transform: translateY (-50%);

Co rozumiesz przez „zakotwiczenie pozycji”?

Jak wygląda kotwiczenie pozycji?

Zakotwiczenie rodzica

Top

Kotwienie od dołu

Zakotwiczenie w lewo

Prawe zakotwiczenie

Kotwiczenie dziecka

Wyrównanie w pionie

Wyrównanie w poziomie

Kotwienie środkowe