Question

我正在使用described here技术来制作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％）。

我在使用this technique之前已经实现了这一点，但它仅适用于inline-block元素。如果我将.embed-responsive更改为inline-block，则会中断。

那么有一种替代方法（最好只用CSS ）我可以用来垂直居中iframe，同时仍然有响应吗？这必须在浏览器调整大小时起作用。

http://jsfiddle.net/benfosterdev/xfA3L/

Answer 1

所以我在发布2分钟后发现了这一点：）

.embed-resposive绝对定位top:50%，边距顶部设置为高度比率(video height / video width) / 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;
}

小提琴已更新。

垂直中心响应iframe

1 个答案: