时间戳

首页 > 解决方案 > 为什么在绝对位置/固定位置的元素上设置 50vw 或 50% 不能将其完全设置在中间？

html - 为什么在绝对位置/固定位置的元素上设置 50vw 或 50% 不能将其完全设置在中间？

问题描述

事实上，我有时会发现设置50vw只会使元素达到其应有的距离的一半左右。

为什么会这样？我在这里错过了什么？

标签： htmlcss

解决方案

您还需要减去项目宽度的一半。例如，您可以使用边距来做到这一点。还有其他选项，例如 calc。

看这个小提琴的例子：https ://jsfiddle.net/cgsymvyg/1/

#box1 {
  border: 1px solid red;
  background: green;
  color: white;
  
  width: 100px;
  height: 100px;
  
  position: absolute;
  left: 50vw;
}

#box2 {
  top: 200px;
  
  border: 1px solid green;
  background: red;
  color: white;
  
  width: 100px;
  height: 100px;
  
  position: absolute;
  left: 50vw;
  margin-left: -50px;
}

#box3 {
  top: 400px;
  
  border: 1px solid yellow;
  background: blue;
  color: white;
  
  width: 100px;
  height: 100px;
  
  position: absolute;
  left: calc(50vw - 50px);
}
<div id="box1">
  Box 1
</div>

<div id="box2">
  Box 2
</div>

<div id="box3">
    Box 3
</div>

推荐阅读