Html 如何始终在中心对齐 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20583088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align iframe always in the center
提问by mathinvalidnik
I have an iframe surrounded by div element and I am simply trying to position it always in the center. here is my jsfiddle effort : jsfiddle
我有一个被 div 元素包围的 iframe，我只是想将它始终放置在中心。这是我的 jsfiddle 努力： jsfiddle
and trully believe that someone could help because I am sure that it is something really simple but I just can not see it.
并且真的相信有人可以提供帮助，因为我确信这是非常简单的事情，但我只是看不到它。
Here is the HTML itself:
这是 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>
回答by Facundo Colombier
center iframe
中心 iframe
one solution is:
一种解决方案是：
<div>
<iframe></iframe>
</div>
css:
css：
div {
text-align:center;
width:100%;
}
iframe{
width: 200px;
}
fiddle: http://jsfiddle.net/h9gTm/
小提琴：http: //jsfiddle.net/h9gTm/
edit: vertical align added
编辑：添加垂直对齐
css:
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;
}
fiddle: http://jsfiddle.net/h9gTm/1/
小提琴：http: //jsfiddle.net/h9gTm/1/
Edit: FLEX solution
编辑：FLEX 解决方案
using display: flexon the <div>
使用display: flex在<div>
div {
display: flex;
align-items: center;
justify-content: center;
}
fiddle: http://jsfiddle.net/h9gTm/867/
回答by Philip
Try this:
尝试这个：
#wrapper {
text-align: center;
}
#wrapper iframe {
display: inline-block;
}
回答by atw
I think if you add margin: auto; to the div below it should work.
我想如果你添加 margin: auto; 到它下面的 div 应该可以工作。
div#iframe-wrapper iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
right: 100px;
height: 100%;
width: 100%;
}
回答by Jason C
If all you want to do is display an iframe on a page, the simplest solution I was able to come up with doesn't require divs or flex stuff is:
如果您只想在页面上显示 iframe，那么我能想出的最简单的解决方案是不需要 div 或 flex 的东西：
html {
width: 100%;
height: 100%;
display: table;
}
body {
text-align: center;
vertical-align: middle;
display: table-cell;
}
And then the HTML is just:
然后 HTML 就是：
<html>
<body>
<iframe ...></iframe>
</body>
</html>
If this is all you need you don't need wrapper divs to do it. This works for text content and stuff, too.
如果这就是你所需要的，你不需要包装器 div 来做到这一点。这也适用于文本内容和东西。
小提琴。
Also thislooks even simpler.
另外这个看起来更简单。
回答by G-Cyrillus
You could easily use display:table to vertical-align content and text-align:center to horizontal align your iframe. http://jsfiddle.net/EnmD6/7/
您可以轻松地使用 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;
}
version with table-row http://jsfiddle.net/EnmD6/9/
带有表格行的版本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;
}
回答by Prasanth K C
First remove position:absoluteof div#iframe-wrapper iframe, Removeposition:fixedand all other cssfrom div#iframe-wrapper
首先删除position:absolute的div#iframe-wrapper iframe，删除position:fixed和其他所有的CSS从div#iframe-wrapper
Then apply this css,
然后应用这个css，
div#iframe-wrapper {
width: 200px;
height: 400px;
margin: 0 auto;
}
