我正在使用此处描述的技术来使iframe(视频)具有响应性。基本上,iframe在宽度为100%的包装元素内绝对定位。包装元素的填充根据视频的宽高比设置: (链接)
我需要将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垂直居中,并且还能响应式地工作?这必须在浏览器调整大小时有效。链接