在调整窗口大小时，使元素垂直居中，并使用负顶部

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