html - 如何将 iframe 水平居中？

Question

考虑以下示例:( live demo )

HTML:

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

CSS:

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

结果:

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

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>