将 iframe 居中？答案

【问题标题】：Centering an iframe?将 iframe 居中？
【发布时间】：2012-02-24 19:09:17
【问题描述】：

居中 iframe 的最佳方式是什么？

你预见到像这样简单的事情会出现什么问题吗？

<html>
<body>

<iframe src="https://abc.123.com/" width="100%" height="100%"></iframe>



</body>
</html>

【问题讨论】：

标签： html iframe

【解决方案1】：

这是我的看法：

<html>
<body>

<iframe src="https://abc.123.com/" style="border: none; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

</body>
</html>

您需要此 CSS 来确保 100% 的高度和宽度，以及没有边距或内边距。

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

http://jsfiddle.net/PAmDU/

请记住，这可能会引起用户的鄙视，他们发现后退/前进按钮更改整个页面而不是 iframe 覆盖整个页面存在不一致。如果可能的话，最好避免将 iframe 用于这样的事情，如果这些天都这样的话。

【讨论】：

非常感谢，阿拉姆。为什么现在 iFrame 如此被看不起？您有我可以阅读的有关此主题的外部链接吗？
如果 iframe 不是 100% 宽度，这不会使 iframe 居中。此外，由于 iframe 上的边框，它会留下滚动条。
我的印象是用户希望整个内容覆盖屏幕，从他们的问题。但你是对的，标题确实说居中。见jsfiddle.net/tDLkr/3

【解决方案2】：

<iframe src="https://abc.123.com/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

这会很好，但是你仍然会有一个非常小的灰色边框。

要解决这个问题，请在 CSS 中使用它：

body {
    margin: 0;
}

【讨论】：

【解决方案3】：

如果您真的希望它居中且宽度不为 100%，请使用以下内容：

<html>
<body style="margin: 0;">
    <div style="margin: 0 auto; width: 500px;"><!--Change this width if you want-->
        <iframe src="http://www.w3schools.com" style="width: 100%; height: 100%; border: none;">
        </iframe>
    </div>
</body>
</html>

我还去掉了导致滚动条的 iframe 边框。

【讨论】：