与视频标签垂直对齐

我正在尝试垂直对齐<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％（从平移Y），但它并不与上面做任何事：50 ％，所以视频在屏幕外一半。

任何想法，我可能做错了什么？

注意：我也在关于display:table-cell的评论中尝试了这个建议，这也没有奏效。

来源

2014-09-23 Kevin

澄清一点的是，如果我做的'顶：350px'我得到大致正确的效果，所以出于某种原因，'顶部：50％'是不是做它应该是什么。我认为问题在于指定的百分比是父元素（在这种情况下是'body'），但我需要它是'window.innerHeight'的50％，这可能是不可能的。 – Kevin 2014-09-23 06:24:20

尝试'position：absolute;'而不是'position：relative;'来视频。 – Anonymous 2014-09-23 06:25:50

实际上是什么工作，是增加了单行的JS，来设置body.height = window.innerHeight。然后，最高行为应该是这样。我非常肯定，我发布的解决方案是假设你的内容是在一个固定大小的容器（一些宽度和高度的外部div）。 – Kevin 2014-09-23 06:40:41

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

来源

2014-09-23 14:17:49 Kevin

与视频标签垂直对齐

回答

相关问题