css - 与视频标签垂直对齐

Question

我正在尝试垂直对齐 <video>标签。我找到了以下文章，看起来很有前途，但运气不佳:

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-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 的建议这也没有用。

Answer 1

所以我想通了， body 需要有高度。起初我通过 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;
}