使用Transform translate居中div失败，位置偏上问题求助

你的代码存在两个关键问题，导致div无法垂直居中反而偏上：

1. Transform参数错误 #

你写的transform: translate(-50%, 50%)中第二个参数是50%，这会让元素向下偏移自身高度的50%，和top:50%的效果叠加后，自然会偏上。正确的参数应该是-50%，这样才能让元素向上偏移自身高度的50%，配合top:50%实现垂直居中。

2. 父容器未设置高度 #

position: relative的元素使用top:50%时，是基于父元素的高度计算偏移量，但默认情况下html和body的高度并没有占满整个视口，所以top:50%没有有效的参照高度，垂直居中的逻辑也就不成立。

修正后的完整代码 #

CSS部分：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML部分保持不变：

<div class="login-box">
  <h1>Login</h1>
  <div class="textbox">
    <input type="text" placeholder="Username" name="" value="">
  </div>
  <div class="textbox">
    <input type="password" placeholder="Password" name="" value="">
  </div>
  <input class="btn" type="button" name="" value="Sign in">
</div>

补充说明 #

• 把position: relative改为position: absolute是因为absolute定位会脱离文档流，更适合实现全屏居中效果；如果一定要用relative，需要给父容器（比如body）设置position: relative和100%高度。
• 给html和body设置margin:0和padding:0是为了清除浏览器默认边距，避免出现不必要的滚动条或偏移。

内容的提问来源于stack exchange，提问作者Brian