html - 为什么需要 translateY(-50%) 来使位于顶部 : 50%? 的元素居中

Question

我可以看到这段代码可以在其父元素内垂直对齐 div:

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

问题是为什么？我的第一个想法是父元素包含的不仅仅是视口(viewport)。我使我的父视口(viewport)高度等于 100vh 和宽度 100%。那没有用。我仍然需要翻译或负边距抵消。为什么父元素设置为margin: 0;时需要负偏移量？是因为我没有考虑计算出的利润吗？

Answer 1

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%；变换:翻译Y(-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>