响应式 iframe 垂直居中

Question

我正在使用此处描述的技术来使iframe（视频）具有响应性。基本上，iframe在宽度为100％的包装元素内绝对定位。包装元素的填充根据视频的宽高比设置： （链接）

.embed-responsive {
    position: relative;
    /* video height / video width */
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden;
}
.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

我需要将iframe垂直居中在父容器中（父容器高度为100%）。我之前使用了这个技巧来实现：链接，但它只适用于inline-block元素。如果我将.embed-responsive改成inline-block，它会破坏布局。所以有没有其他的（最好是仅使用CSS）方法可以让iframe垂直居中，并且还能响应式地工作？这必须在浏览器调整大小时有效。链接

- Ben Foster

Answer 1

我花了2分钟发布后弄清了这个问题 :)

将.embed-responsive设为绝对定位，使用top:50%并将上边距设置为高度比率的一半(视频高度/视频宽度) / 2，就可以垂直居中了：

.embed-responsive {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    /* video height / video width */
    padding-bottom: 56.2%;
    /* the above value * 0.5 */
    margin-top: -28.1%;
    height: 0;
    overflow: hidden;
}

Fiddle已经更新。

- Ben Foster

---

你应该在高度为100%的封闭容器div中进行设置，就像你问题中的fiddle示例所演示的那样，我发现这对于使其正常工作至关重要。 - bazz

这会使我的视频与整个窗口一样大，并在其下方留出空白的空间 :( - prismspecs