Html 定心框架div

当编码iframe以调整屏幕大小时，我无法将其居中。我尝试了所有问题的答案，但没有成功。我是否遗漏了一些明显的东西，或者没有办法做到这一点

HTML

---

您可以尝试应用边距：自动；将css属性添加到您的div。

---

在我的示例中，我使用常规设置（此处应用的是位置：absolute'）水平和垂直居中包装器元素，并在此处定义宽度和高度。视频本身只是填充了中间的包装

html，正文{
身高：100%；
保证金：0；
}
.录像带{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
/* 16:9 */
宽度：80vw；
高度：45vw；
}
.videoWrap iframe{
宽度：100%；
身高：100%；
}

---

使用

左：50%

和

转换：translateX（-50%）

：

---

使用您链接的问题

.videoWrap{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.videoWrap iframe{
宽度：300px；
高度：300px；
}
div，body，html{
身高：100%；
宽度：100%；
}

是否尝试将

iframe

置于

div

的中心位置？或者屏幕中的

div

？如果您觉得其中一种解决方案有帮助，请不要忘记标记答案。如果人们看到你已经接受了答案，他们将来更有可能帮助你。@BlackandRangeCat我正在将iframe放在div中居中这确实使用了

flex

，这在早期版本的

IE

中是不受支持的。将iframe添加到具有多个div的网站时，这不起作用。编辑：这起作用了！然而，“div，body，html{…}”是不必要的，尤其是在一个有多个divs@alohomoira我认为你是对的，但是

jsfiddle

需要。您的网站必须在其他位置设置高度/宽度。不管怎样，很高兴它有帮助！在询问之前，我试过多次。幸亏使用“transform:”它调整了视频窗口的大小

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

.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%;
}

.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%;
}