【问题标题】：How to align iframe always in the center如何始终在中心对齐 iframe
【发布时间】：2014-01-02 04:49:17
【问题描述】：

我有一个被 div 元素包围的 iframe，我只是想将它始终定位在中心。这是我的 jsfiddle 工作：jsfiddle

并且真的相信有人可以提供帮助，因为我确信这很简单，但我就是看不到。

这是 HTML 本身：

<div id="top-element">Some div that has greater width than the inner div</div>
<div id="iframe-wrapper">
    <iframe src="http://www.apple.com/" scrolling="auto"></iframe>
</div>

【问题讨论】：

标签： html css iframe alignment

【解决方案1】：

居中 iframe

编辑：FLEX 解决方案

在<div> 上使用display: flex

div {
    display: flex;
    align-items: center;
    justify-content: center;
}

JSFiddle：https://jsfiddle.net/h9gTm/867/

一种解决方案是：

div {
  text-align:center;
  width:100%;
}
div > iframe{
  width: 200px;
}

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

JSFiddle：https://jsfiddle.net/h9gTm/

编辑：添加垂直对齐

css:

div {
    text-align: center;
    width: 100%;
    vertical-align: middle;
    height: 100%;
    display: table-cell;
}
div > iframe{
  width: 200px;
}
div,
body,
html {
    height: 100%;
    width: 100%;
}
body{
    display: table;
}

JSFiddle：https://jsfiddle.net/h9gTm/1/

【讨论】：

刚刚编辑更改边距自动，因为它不适用于 iframe，而是使用 text-align 来代替它
margin:auto 如果您将 iframe 显示为块，则适用于 iframe :) iframe {display:block;margin:auto;} jsfiddle.net/EnmD6/5
只是为了真正确保其输入还添加：border：0;边距：0；到你的身体 CSS
使用这个，我无法调整 iframe 的大小。如何做到这一点？
iframe css 中有一个错误，刚刚修复它，谢谢@biozalp

【解决方案2】：

试试这个：

#wrapper {
    text-align: center;
}

#wrapper iframe {
    display: inline-block;
}

【讨论】：

【解决方案3】：

我想如果你添加 margin: auto;到下面的 div 它应该可以工作。

div#iframe-wrapper iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: 100px;
    height: 100%;
    width: 100%;
}

【讨论】：

【解决方案4】：

如果您只想在页面上显示 iframe，我能想出的不需要 div 或 flex 的最简单的解决方案是：

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

然后 HTML 就是：

<html>
  <body>
     <iframe ...></iframe>
  </body>
</html>

如果这就是你所需要的，那么你不需要包装 div 来完成它。这也适用于文本内容。

Fiddle.

另外this 看起来更简单。

【讨论】：

【解决方案5】：

您可以轻松地使用 display:table 垂直对齐内容，使用 text-align:center 水平对齐 iframe。 http://jsfiddle.net/EnmD6/7/

html {
    display:table;
    height:100%;
    width:100%;
}
body {
    display:table-cell;
    vertical-align:middle;
}
#top-element {
    position:absolute;
    top:0;
    left:0;
    background:orange;
    width:100%;
}
#iframe-wrapper {
    text-align:center;
}

带有表格行的版本http://jsfiddle.net/EnmD6/9/

html {
    height:100%;
    width:100%;
}
body {
    display:table;
    height:100%;
    width:100%;
    margin:0;
}
#top-element {
    display:table-row;
    background:orange;
    width:100%;
}
#iframe-wrapper {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    text-align:center;
}

【讨论】：

但是当你尽可能地最小化窗口时，看看 iframe 是如何超出其周围 div 的右边界的（顶部的橙色背景）
添加垂直到正文填充或垂直边距到 iframe 容器以保持安全区域。否则，继续使用 display 和 display 顶部元素和 iframe-container 作为 table-row ...这个演示是你的提示，看看通过 idsplay:table/table-cell/table-row 等可以轻松完成事情开。
@GCyrillius 伙计们，我想告诉你的是 iframe 超出了它周围的 div。只需挤压结果窗口并滚动到右端，看看它是如何超出橙色 div 的右边界的。
oups，抱歉，我没有更新 jsfiddle，请参阅 jsfiddle.net/EnmD6/9 并误解了您的意思，只是希望显示绝对位置的默认值 :)
@GCyrillius 现在看起来不错，但我不知道您是否注意到在我的垂直调整大小示例中，没有显示窗口滚动，而只有 iframe 滚动发生了变化。检查：jsfiddle.net/EnmD6

【解决方案6】：

首先删除div#iframe-wrapper iframe中的position:absolute，删除 position:fixed和所有其他css从div#iframe-wrapper

然后应用这个css，

div#iframe-wrapper {
  width: 200px;
  height: 400px;
  margin: 0 auto;
}

FIDDLE DEMO

【讨论】：

这完全行不通，因为它不会滚动 iframe 本身
@mathinvalidnik 你想在页面滚动时滚动 iframe 吗？？
是的。否则它会固定在窗口上。另外，如果窗口上的垂直滚动不显示，那就太好了。
@mathinvalidnik 检查我更新的答案。检查更新的小提琴

【解决方案7】：

您可以使用 CSS 并添加一个容器和一个样式以使其居中

<style>
.container { 
  height: 75px;
  position: relative;
  border: none;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

粘贴后添加一个 div 到 iFrame，然后它应该看起来像这样

<div class="container">
  <div class="center">
    <iframe src="embbeded form link here" width="600" height="300" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
  </div>
</div>

【讨论】：

【解决方案8】：

很简单：

您只需将 iframe 放在两者之间
```
 <center> ...  </center>
```
一些
```
 <br>
```

。就是这样。

【讨论】：

请不要使用这个。 HTML 4 中已弃用中心标签。