居中iframe div

编码iframe以调整屏幕大小时，我无法居中。我尝试了所有来自THIS的回答，但没有运气。我错过了一些显而易见的东西，还是没有办法做到这一点？居中iframe div

HTML

<div class="videoWrap"> 
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe> 
</div>

CSS

.videoWrap { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.videoWrap iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 80%; 
    height: 100%; 
}

来源

2017-04-20 alohomoira

您是否试图将'iframe'放在'div'中？或屏幕上的'div'？ – blackandorangecat

如果您觉得这些解决方案有帮助，请不要忘记标记答案。如果他们看到你已经接受了答案，人们将来会更有可能帮助你。 – blackandorangecat

@blackandorangecat我正在将div放在iframe的中心 – alohomoira

使用您链接的问题...

.videoWrap { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.videoWrap iframe { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
div, body, html { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div class="videoWrap"> 
 
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe> 
 
</div>

来源

2017-04-20 17:47:42 blackandorangecat

这确实使用'IE'的早期版本不支持的'flex' – blackandorangecat

将它添加到具有多个div的网站时无效。 – alohomoira

编辑：这工作！然而'div，body，html {...}'不是必须的，尤其是在一个有多个div的网站 – alohomoira

您可以尝试采用保证金：汽车; CSS属性到你的div。 https://www.w3schools.com/css/css_align.asp

来源

2017-04-20 17:44:57 Frost

在询问之前试了多次。谢谢！ – alohomoira

在我的例子我正在与通常的设定水平和垂直方向定中心包装元素（位置：absolute`施加这里），并且还限定这里的宽度和高度。视频本身只是填充居中包装。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.videoWrap { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    /* 16:9 */ 
 
    width: 80vw; 
 
    height: 45vw; 
 
} 
 

 
.videoWrap iframe { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="videoWrap"> 
 
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe> 
 
</div>

来源

2017-04-20 17:46:00 Johannes

使用left: 50%和transform: translateX(-50%)：

.videoWrap { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.videoWrap iframe { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 80%; 
    height: 100%; 
}

来源

2017-04-20 17:46:04 Toby

使用'transform：'调整了视频窗口的大小 – alohomoira

回答

相关问题