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

HTML:

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

CSS:

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

结果:

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


添加显示:块;到你的iframe css。

Div, iframe { 宽度:100 px; 高度:50 px; 保证金:0自动; background - color: # 777; } iframe { 显示:块; 边框样式:没有; } < div > div < / div > < iframe的src = "数据:iframe " > < / iframe >


你可以把iframe放在<div>中

<div>
    <iframe></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;

}

根据http://www.w3schools.com/css/css_align.asp,将左右边距设置为auto指定它们应该平均分割可用的边距。结果是一个居中的元素:

margin-left: auto;margin-right: auto;

如果你把一个视频放在iframe中,你想让你的布局是流畅的,你应该看看这个网页:流体宽度视频

取决于视频来源,如果你想让旧视频变得有响应,你的策略将需要改变。

如果这是你的第一个视频,这里有一个简单的解决方案:

< div class = " videoWrapper”> <!——从YouTube复制粘贴——> <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> < / div >

并添加这个css:

.videoWrapper { 位置:相对; padding-bottom: 56.25%;/* 16:9 */ padding-top: 25 px; 高度:0; } .videoWrapper iframe { 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; }

免责声明:这些都不是我的代码,但我已经进行了测试,并对结果感到满意。


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

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

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


对齐iframe元素的最简单代码:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>

你可以试试

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

我希望它对你有用

link


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

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

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

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

最简单的解决方法。

iframe {
    margin:auto;
    display:block;
}

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;"6" allowfullscreen="true" allow="自动播放;clipboard-write;加密介质;画中画;合伙分成应得的" > < / iframe >

使用它和嵌入facebook在iframe中心的HTML页面