水平居中 iframe答案

【问题标题】：Center an iframe horizontally水平居中 iframe
【发布时间】：2013-06-12 00:25:36
【问题描述】：

这段代码有效地将 iframe 居中，但在其左边缘而不是其中心。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Videos</title>
    <style>
        div.center {
            width: 200px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body style="background: lightblue">
    <div class="center">
        <iframe src="http://www.youtube.com/embed/dgZ-K87NcwQ"></iframe>
        <p />
        <iframe src="http://www.dailymotion.com/embed/video/xoy7jd"></iframe>
    </div>
</body>
</html>

我看过这些问题：

不幸的是，没有一个对我有用。

如何真正将这些放在屏幕上？

【问题讨论】：

在 HTML 中，不要写 <p />。它不会做你认为它会做的事情。见this fiddle。您可以在 XHTML 中执行此操作，但强烈建议不要这样做。但不是在 HTML 中。此外，您不应该将段落用于垂直间距。
对，我应该改用
吗？
没有。给 iframe display:block 然后你就可以在它们上面加边距了。

标签： html css centering

【解决方案1】：

问题在于您的 iframe 宽度超过 200 像素（您为其居中的包含 div 定义的固定宽度）。这将导致它们的多余宽度溢出 div 的右边界。

根据您网站的完整结构，尝试将自动边距直接放在 iframe 上。

div.center iframe{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

演示：http://jsfiddle.net/NvfKu/

【讨论】：

可以简化为 -> display: block;边距：0 自动；