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

Question

我有一个由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>

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;
}