CSS Calc：将每个浏览器宽度的定位元素垂直居中

Question

我有一个绝对定位的背景视频，已经被“裁剪”了-意味着顶部和底部20％左右被隐藏了。

以下是我所建房屋的链接（英雄区域）： http://pchapman-sandbox.dev.vuforia.com/vuforia-landing/

在此视频的中心，它在几个点上显示了一部电话，电话中包含重要的视频内容。我需要那部手机才能在该裁剪区域内保持居中。

问题：目前，我已经编写了7个媒体查询，但查询条件比较温和。但是，在各种宽度下，居中均会偏离，并且这是一个笨拙的解决方案。

“裁剪”区域的高度从420px到460px <video>上的当前控件由此开始：

    top: -35vh; 

    @media screen and (min-width: 2000px) and (max-width: 2400px) {
       top: -31vh !important;
       transition: top 2s ease-in;
     }

     // multiple media queries down to...

     @media screen and (max-width: 980px) {
       top: 0 !important;
       transition: top 2s ease-in;
     }  

我很喜欢calc()函数的选项；计算基于浏览器宽度的top值。我检查了很多链接，包括通过高度控制填充，并查看了SASS Poly Fluid Sizing，但是我什么也做不了，并且很快就会遇到挫败点。另外，我认为我不太了解calc()，什么价值何去何从。

这是正确的方法吗？我应该改用其他东西吗？如果可能的话，我希望使用CSS解决方案。

谢谢您的帮助！