Html 水平居中 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17123986/
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
Center an iframe horizontally
提问by Aybe
This piece of code effectively centers the iframes but on their leftedge not their center.
这段代码有效地将 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>
I've seen these questions :
我见过这些问题：
- How to center an iframe horizontally?
- how do I center the full page?
- How to horizontally center a <div> in another <div>?
- How to center an iframe horizontally?
Unfortunately none worked for me.
不幸的是，没有一个对我有用。
How would one reallycenter these on the screen ?
人们如何真正将这些放在屏幕上？
回答by Matt Rohland
The issue is that your iframes are wider than 200px (the fixed width you've defined for their centered containing div). This will cause their excess width to spill over the right boundry of the div.
问题是您的 iframe 宽度超过 200 像素（您为其居中的包含 div 定义的固定宽度）。这将导致它们多余的宽度溢出 div 的右边界。
Depending on the full structure of your site try putting the auto margin directly on the iframes.
根据您网站的完整结构，尝试将自动边距直接放在 iframe 上。
div.center iframe{
display: block;
margin-left: auto;
margin-right: auto;
}
