html - 调整窗口大小时保持元素垂直居中，顶部为负

Question

我会尽量让它变得简单。我有一个带有负顶部的长矩形来隐藏它的大部分。我想在调整窗口大小时使其垂直居中。

就是这样: https://fiddle.jshell.net/kejswyu5/2/

谢谢!

Answer 1

进行如下更改，使其始终垂直居中，也可以使用此方法获得动态高度(无固定高度)。

#box{
  position:absolute;
  top:50%;
  left:44vw;
  width:50px;
  height:800px;
  border-bottom:3px solid black;
  background-color:red;
  transform: translateY(-50%);
}