我最近遇到了一些问题，我的网站上的视频元素不能仅在iPad(iOS 8.3)移动Safari的"全屏模式"(意思是延伸到整个窗口的div)上垂直居中。
在多次试错中，我发现了一种奇特的行为。当绝对定位的视频被拉伸到全高和全宽，并设置自动边距时，视频元素垂直居中：
edit：请注意，您需要减小fiddle中结果部分的宽度才能查看效果。
Fiddle
HTML
<div class="hello">
<video src="foo"></video>
</div>
CSS
.hello {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
margin: auto;
}
这在移动Safari上起到了作用，似乎对Chrome Android或Firefox没有任何不利影响。它在桌面浏览器上也可以正常工作。当我完全拉伸视频时，这个边距是如何垂直居中的？
如果没有实际的视频源，你的小提琴就无法工作。我无法重现你所描述的由边缘触发的行为。但我确实在iOS上搜索垂直居中视频时发现了你的问题。也许我的结论对你有帮助：
当前的iOS浏览器将在视频底部留下空白(假设视频元素比渲染视频所需的元素高)。只要底部的空白空间小于本机控件占用的大小，它就会一直存在。这背后的明显想法是，如果可能的话，不要在视频前面渲染控件，而是在视频下面渲染控件。
问题来了：即使您使用"controls"属性停用/未激活控件，也会发生这种情况。我唯一能想到的解决办法是获得固有的宽度&视频的高度，并手动计算当前实际视频高度。然后，您可以继续设置视频节点的高度，并根据您的情况设置一个上边距，使其在容器内垂直居中。
希望这能有所帮助。