中心iframe

Question

我有一个由div元素包围的iframe，我只是试图将它始终放在中心位置。这是我的努力： 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>

Answer 1

中心iframe

一个解决方案是：

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

的CSS：

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

小提琴：http://jsfiddle.net/h9gTm/

修改：添加了竖线对齐

的CSS：

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

小提琴：http://jsfiddle.net/h9gTm/1/

编辑：FLEX解决方案

在display: flex

上使用<div>

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

小提琴：http://jsfiddle.net/h9gTm/867/

Answer 2

试试这个：

#wrapper {
    text-align: center;
}

#wrapper iframe {
    display: inline-block;
}

Answer 3

我认为如果你添加保证金：auto;它下面的div应该可以工作。

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

Answer 4

您可以轻松地使用display：table来垂直对齐内容，text-align：center to horizontal对齐你的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;
}

Answer 5

position:absolute首先删除div#iframe-wrapper iframe ，删除 position:fixed和所有其他css 来自{ {1}}

然后应用此css，

div#iframe-wrapper

<强> FIDDLE DEMO

Answer 6

如果您只想在页面上显示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看起来更简单。

Answer 7

非常简单：

你只需要将 iframe 放在中间
```
 <center> ...  </center>
```
一些
```
 <br>
```

。仅此而已。

如何将iframe始终放在中心位置

7 个答案:

中心iframe

的CSS：

小提琴：http://jsfiddle.net/h9gTm/

的CSS：

小提琴：http://jsfiddle.net/h9gTm/1/

编辑：FLEX解决方案