Html 如何垂直对齐 <iframe>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19508732/
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> vertically?
提问by user2865400
All that I want to be able to do is take the tag and vertically align it with the page. I do not know if I have to put the tag inside another tag in order to work. Any help would be greatly appreciated. Thanks in advance!
我想要做的就是获取标签并将其与页面垂直对齐。我不知道是否必须将标签放入另一个标签中才能工作。任何帮助将不胜感激。提前致谢！
CODE
代码
<!DOCTYPE html>
<html lang=en-US>
<head>
<title></title>
<style type="text/css">
iframe {
margin: 0 auto;
display: block;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<iframe width="800" height="500"">
</iframe>
</body>
</html>
回答by muiiu
Here you go.
干得好。
The trick is to play with the margin and the top offset properties of the nested element.
诀窍是使用嵌套元素的边距和顶部偏移属性。
In this case, given a parent div (A) of 300px, I've offset the nested div (B) by 50% of 300, which is 150. So B is positioned 150px down from the top of the A container. However, we aren't finished. In order to get the center of B to match the center of A, we are required to apply the negative 50% of B's height to the margin-top property. This centers it and the math checks out.
在这种情况下，假设父 div (A) 为 300px，我将嵌套 div (B) 偏移了 300 的 50%，即 150。因此 B 位于 A 容器顶部向下 150px 处。然而，我们还没有结束。为了让 B 的中心与 A 的中心匹配，我们需要将 B 高度的负 50% 应用于 margin-top 属性。这将它居中并进行数学检查。
It's even easier if you know the dimensions of everything in pixels.
如果您知道所有事物的尺寸（以像素为单位），那就更容易了。
Feel free to change the A width or height. It'll center dynamically.
随意更改 A 宽度或高度。它将动态居中。
div#a
{
width: 300px;
height: 300px;
border-width:1px;
border-style: solid;
/* important stuff below */
display: inline-block;
}
div#b
{
width: 60px;
height: 60px;
background-color: red;
/* important stuff below */
position: relative;
margin: -30px auto 0 auto;
top: 50%;
}
As such, I'd suggest wrapping your iframe in a div. It gives you a bit more control. Then again, I'm one of those excessive div wrappers...
因此，我建议将您的 iframe 包装在一个 div 中。它给了你更多的控制权。再说一次，我是那些过度使用 div 包装器的人之一......
回答by mpm
if you need to center the iframe , giving a width to its selector should do the trick:
如果您需要将 iframe 居中，为其选择器提供宽度应该可以解决问题：
iframe {
margin: 0 auto;
display: block;
width: 800px;
border: 1px solid #ccc;
}
回答by binderbound
This is a poor way to do it, but it's the most compatible with all browsers. Other methods have their problems.
这是一个糟糕的方法，但它与所有浏览器最兼容。其他方法有它们的问题。
- Create table that has height = 100% and one row with one cell in it.
- Set the cell's style to
vertical-align: middle; width: 800px; margin-right: auto; margin-left: auto;. in stylesheet add
html, body{ height: 100%; }
- 创建高度 = 100% 且一行包含一个单元格的表格。
- 将单元格的样式设置为
vertical-align: middle; width: 800px; margin-right: auto; margin-left: auto;. 在样式表中添加
html, body{ 高度: 100%; }
Once again, this is a bit of a bad way to do it, because you are using tables to organise visual layout, but it has benifits
再一次，这是一个有点糟糕的方法，因为您正在使用表格来组织视觉布局，但它有好处
- simple
- doesn't require HTML 5 on browser
- compatible with pretty much every browser back to IE 5
- doesn't need javascript
- 简单的
- 浏览器不需要 HTML 5
- 与几乎所有浏览器兼容回到 IE 5
- 不需要javascript
ammendment: make sure you specify min-width and min-height in body style to keep iFrame always visible.
修正：确保在 body 样式中指定 min-width 和 min-height 以保持 iFrame 始终可见。
回答by suresh.g
This might work for you:
这可能对你有用：
<table height="100%" width="100%">
<tr>
<td valign="middle" align="center">
<iframe width="800" height="500"></iframe>
</td>
</tr>
</table>
and in CSS
并在CSS 中
body{ height:100% }
回答by bets
Use flex. It is more straight forward.
使用弹性。它更直接。
/* Here just for context */
html,
body,
.container {
width: 100%;
height: 100%;
}
/* This is whats needed */
.container {
display: flex;
align-items: center;
justify-content: center;
}<div class="container">
<iframe width="300" height="150" src="https://www.youtube.com/embed/V17ij5Ap1pA"></iframe>
</div>