Css 与视频标签垂直对齐

我正在尝试垂直对齐

标记。我发现了下面这篇文章，看起来很有希望，但运气不佳：

为了保持纵横比，我有如下CSS：

video {
    min-width:100%;
    width:100%;
    height:auto;
    background-color:black;
    background-size:cover;
}

因此，效果是使视频在浏览器上水平移动，垂直移动时尽可能高以适应纵横比。这会在浏览器窗口的底部留下一些黑色空间，所以为了看起来好看，我想将视频元素居中，在上面和下面留下相等的黑色空间

链接上的建议是：

video {
    top:50%;
    position:relative;
    transform: translateY(-50%); /* and all the browser variants of this */
}

结果，在一些浏览器中，视频会向上移动50%（从translateY），但它对top没有任何作用：50%，因此视频是半离屏的

你知道我做错了什么吗

---

注意：我还尝试了关于

display:table cell

的评论中的建议，该建议也不起作用。

所以我想，身体需要有高度。起初，我是通过jQuery实现的，例如：

$(document).ready(function() {
    // actually more complicated than this, because window.innerHeight isn't
    // available on all browsers...
    $('body').height(window.innerHeight);
});

但后来一位同事指出，我现在也必须处理调整大小的问题。他提出了一种替代的CSS专用解决方案，该解决方案同样有效：

html,body {
    min-height:100%;
    height:100%;
    margin:0;
}

---

一个澄清是，如果我做了

top:350px

我得到了大致正确的效果，因此出于某种原因，

top:50%

没有做它应该做的事情。我认为问题在于指定的百分比是父元素的百分比（

在本例中为body

），但我需要它是

窗口的50%。innerHeight

这可能不可能。请尝试

位置：绝对而不是
位置：相对到video。实际上，有效的方法是添加一行JS，以设置body.height=window.innerHeight。然后top会按照它应该的方式运行。我很确定我发布的解决方案是假设您的内容在一个固定大小的容器中（一些带有宽度和高度的外部div）。