一番上にある要素を中央に配置するためにtranslateY（-50％）が必要なのはなぜですか：50％？

Question 1

このコードは、親要素内でdivを垂直方向に整列するように機能することがわかります。

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

問題はなぜですか？私が最初に考えたのは、親要素にはビューポート以上のものが含まれているということでした。親ビューポートの高さ100vhと幅を等しくしました100%。それはうまくいきませんでした。私はまだ平行移動または負のマージンオフセットが必要でした。親要素がに設定されているのに、なぜ負のオフセットが必要なのmargin: 0;ですか？私が考慮していないのは計算されたマージンのためですか？

Question 2

top：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％; transform：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％？

top：0 （デフォルト）

トップ：50％

上：50％; transform：translateY（-50％）;

「位置固定」とはどういう意味ですか？

位置固定はどのように見えますか？

親の固定

上

ボトムアンカー

左アンカー

右アンカー

子の固定

垂直方向の配置

水平方向の配置

センターアンカー