考虑下面的例子:(现场演示)

HTML:

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

CSS:

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

结果:

为什么iframe不像div一样集中对齐?我怎么把它放在中间?


当前回答

HTML:

<div id="all">
    <div class="sub">div</div>
    <iframe>ss</iframe>
</div>

CSS:

#all{
    width:100%;
    float:left;
    text-align:center;
}
div.sub, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;

}

其他回答

如果你不能访问iFrame类,然后添加下面的css包装div。

<div style="display: flex; justify-content: center;">
    <iframe></iframe>
</div>

你可以试试

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

我希望它对你有用

link

将iframe居中的最佳方法和更简单的方法是:

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

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

在我的情况下,解决方案是在iframe类添加:

    display: block;
    margin-right: auto;
    margin-left: auto;

你可以把iframe放在<div>中

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

它可以工作,因为它现在在块元素中。