为什么需要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％; 转换：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％; 转换：translateY（-50％）;

“定位锚”是什么意思？

定位锚是什么样的？

父母锚定

最佳

底部锚固

左锚定

右锚定

儿童停泊

垂直对齐

水平对齐

中心锚定