如何水平居中 iframe？

Question

考虑以下示例：（ 现场演示）

HTML:

 <div>div</div>
<iframe></iframe>

CSS：

 div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

结果：

为什么 iframe 不像 div 那样居中对齐？我怎样才能集中对齐它？

原文由 Misha Moroshko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 display:block; 添加到您的 iframe CSS。

 div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

iframe {
    display: block;
    border-style:none;
}

 <div>div</div>
<iframe src="data:,iframe"></iframe>

原文由 Alohci 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在您的网页上居中 iframe 的最佳方法和更简单的方法是：

 <p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>

其中宽度和高度将是 html 页面中 iframe 的大小。

原文由 pedro 发布，翻译遵循 CC BY-SA 3.0 许可协议