时间戳

首页 > 解决方案 > TranslateY 50% 不居中 div

html - TranslateY 50% 不居中 div

问题描述

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%);
}
<div></div>

标签： htmlcss

解决方案

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

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

推荐阅读