如何将 iframe 水平居中？答案

【问题标题】：How to center an iframe horizontally?如何将 iframe 水平居中？
【发布时间】：2012-01-12 02:38:09
【问题描述】：

考虑以下示例：(live demo)

HTML：

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

CSS：

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

结果：

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

【问题讨论】：

为什么不为这个 iframe 包装一个 div？

标签： html css iframe alignment center-align

【解决方案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>

【讨论】：

谢谢！我应该猜到 inline frame 是一个内联元素 :)
这就是“i”的含义。
所以，或者，您可以给容器一个text-align: center 规则，对吗？
是的，将 text-align: center 添加到容器中也可以
我发现我还必须添加margin: auto;

【解决方案2】：

您可以将 iframe 放入 <div>

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

它之所以有效，是因为它现在位于块元素内。

【讨论】：

【解决方案3】：

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;

}

【讨论】：

【解决方案4】：

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

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

【讨论】：

仅当父元素的样式 text-align 设置为 center 时。

【解决方案5】：

如果您将视频放入 iframe 并且希望布局流畅，您应该查看此网页：Fluid Width Video

取决于视频来源，如果您想让旧视频具有响应性，您的策略需要改变。

如果这是您的第一个视频，这里有一个简单的解决方案：

<div class="videoWrapper">
    <!-- Copy & Pasted from 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 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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

【讨论】：

这是为了让 iframe 中的视频有响应，效果很好，谢谢！

【解决方案6】：

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

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

其中 width 和 height 将是您的 html 页面中 iframe 的大小。

【讨论】：

我认为align 属性已被弃用？为什么 OP 应该使用这种方法而不是使用 CSS - 有什么优势？
style="text-align:center" 不会被弃用，并且会做同样的工作
即使它已被折旧，它仍然有效，而其他一切都不起作用。
这适用于 HTML 文件，因此对于像我这样的新手来说更容易实现。我是2017年才做的，所以不能贬值。感谢您的提示！
html5 中的 align 属性已被删除（尽管它可以工作 - 虽然不适用于 Wordpress 或 Github 等严格的 HTML5 平台）并且 text-align 不能在 iframe 上工作

【解决方案7】：

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

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

【讨论】：

请看这个第一个how-to-answer 这个问题之前已经回答过了，显然，你可以在这里添加你的答案。但是在回答之前，您需要了解一些要点。首先，不要添加以前使用相同代码或建议添加的答案。其次，如果用户已经非常具体地询问了问题以及他需要解决什么问题，请不要添加过于复杂的答案。第三，如果您想对答案或问题提出任何建议，可以添加评论。

【解决方案8】：

你可以试试

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

希望对你有用

link

【讨论】：

【解决方案9】：

在这里，我为所有难以在屏幕中心水平制作 iframe 或图像的人设置了 sn-p。如果你喜欢，请给我点赞。?⯅。

style > img & iframe > 这是你的标签名称，所以如果你想要任何其他标签在中心，请更改它

<html >
 <head> 
            <style type=text/css>
            div{}
            img{
                 margin: 0 auto;
	         display:block;
         	}
	 iframe{	
		margin: 0 auto;
		display:block;
		}
				
            </style>
</head>
 <body >
           
			<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
			
			<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>

【讨论】：

【解决方案10】：

在我的情况下，解决方案是添加 iframe 类：

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

【讨论】：

【解决方案11】：

如果您无法访问 iFrame 类，则将下面的 css 添加到包装器 div。

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

【讨论】：

这为我完成了这项工作，谢谢！不清楚为什么同样的事情在 iframe 上不起作用，但嵌套它有帮助。

【解决方案12】：

我最简单的解决方案。

iframe {
    margin:auto;
    display:block;
}

【讨论】：

【解决方案13】：

使用它并将 facebook 嵌入到 html 页面中心的 iframe 中

【讨论】：