垂直中心响应iframe [英] Vertically center responsive iframe

问题描述

我正在使用此处描述的技术制作iframe （视频）响应。本质上，iframe绝对位于具有100％宽度的包装元素内。包装元素根据视频的宽高比设置了它的填充：

I'm using the technique described here to make an iframe (video) responsive. Essentially the iframe is absolutely positioned within a wrapper element with a 100% width. The wrapper element has it's padding set based on the aspect ratio of the video:

.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％。

I need to be able to center the iframe vertically in the parent container (which has a 100% height).

我在使用这种技术但它只适用于内联块元素。如果我将 .embed-responsive 更改为 inline-block ，则会中断。

I've achieved this before using this technique but it only works on inline-block elements. If I change .embed-responsive to inline-block it breaks.

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

So is there an alternative (preferably CSS only) technique I can use to vertically center the iframe, whilst still being responsive? This must work as the browser is resized.

http： //jsfiddle.net/benfosterdev/xfA3L/

推荐答案

所以我在发布2分钟后想出来： ）

So I figured this out after 2 minutes of posting :)

.embed-resposive 绝对定位于 top：50％和保证金顶部设置为高度比率的一半（视频高度/视频宽度）/ 2 我可以垂直居中：

Making .embed-resposive absolutely positioned with top:50% and margin top set to half the height ratio (video height / video width) / 2 I can center it vertically:

.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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！