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

新手上路,请多包涵

我可以看到此代码用于在其父元素内垂直对齐 div:

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

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

原文由 ltrainpr 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 655
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%;变换:翻译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>

原文由 Andrew Bone 发布,翻译遵循 CC BY-SA 3.0 许可协议

虽然其他人提供的答案是 -50 将内部元素向后移动到其自身高度的一半,但我认为这个小动画显示了移动到 top: 50%; 首先,然后是 transform: translateY(-50%); 第二,可能有帮助。

 @keyframes centerMe {
  0% { top: 0%; transform: translateY(0%); }
  50% { top: 50%; transform: translateY(0%); }
  100% { top: 50%; transform: translateY(-50%); }
}

.outer {
  position: relative;
  border: solid 1px;
  height: 200px;
  width: 200px;
}

.inner {
  position: relative;
  background-color: red;
  height: 50px; width: 50px;
  margin: auto;
  animation: centerMe 5s;
  animation-fill-mode: forwards;
}

/* rules for example */
.hline,.vline{background:#000;position:absolute}.vline{height:100%;width:1px;left:calc(50% - .5px);top:0}.hline{width:100%;height:1px;top:calc(50% - .5px)}
 <div class="outer">
  <div class="hline"></div>
  <div class="vline"></div>
  <div class="inner"></div>
</div>

原文由 JonSG 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题