保持元素垂直居中與負的頂部，而調整窗口大小

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