TranslateY 50% 不居中 div [重复]答案

【问题标题】：TranslateY 50% not centering div [duplicate]TranslateY 50% 不居中 div [重复]
【发布时间】：2021-06-03 14:40:01
【问题描述】：

html 和 body 是 100vh。

在我的身体里，我有一个 100px 的正方形。

当我将前 50% 应用于 div 时，div 会向下移动 50%。但是当我在 div 上应用 translateY(50%) 时，div 不会向下移动 50%？

这是为什么？

注意：您必须在整个页面中打开 html 才能看到 div 不会向下移动 50%。

* {
  padding: 0;
  margin: 0;
}


html, body {
  height: 100vh;
  width: 100vw;
}

body {
  position: relative;
  background-color: black;
}

div {
  height: 100px;
  width: 100px;
  background-color: orange;
  position: absolute;
/*   top: 50%; */
  transform: translateY(50%);
}

&lt;div&gt;&lt;/div&gt;

【问题讨论】：

translate 基于它所附加的元素的大小。 top 基于父级。所以top: 50%; transform: translateY(50%) 将是父元素的一半加上元素高度的 50%。
@Phix。您是说 translate 根据元素的大小移动元素吗？因此，如果 div 的高度为 100px。 TranslateY(50%) 意味着 div 向下 50px？
你可以使用top: 50%;和left: 50%;。
top: 50%; transform: translate(-50%, -50%); left: 50%; 如果您希望它位于中心
@flow 正确。见jsfiddle.net/31mg4x0r

标签： html css

【解决方案1】：

top: 50% 将元素的顶部放置在 容器高度 的 50% 处，因此相关元素的顶部放置在父元素的垂直中心.

transform: translateY(50%) 将元素偏移 其自身高度的 50%。如果元素是 100px 高，它将向下移动 50px。

【讨论】：