Question

我想要做的就是取标签并将其与页面垂直对齐。我不知道是否必须将标签放在另一个标签内才能工作。任何帮助将不胜感激。提前谢谢！

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>

Answer 1

你走了。

http://jsfiddle.net/UFMP7/1/

诀窍是使用嵌套元素的边距和顶部偏移属性。

在这种情况下，如果父div（A）为300px，我将嵌套div（B）偏移300的50％，即150.所以B位于距A容器顶部150px的位置。但是，我们还没有完成。为了使B的中心与A的中心相匹配，我们需要将B的高度的负50％应用于margin-top属性。这是它的中心，数学检查。

如果您知道所有内容的尺寸，就会更容易。

随意更改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%;  
}

因此，我建议将iframe包装在div中。它为您提供更多控制。然后，我是那些过度的div包装之一...

Answer 2

如果你需要将iframe居中，给它的选择器一个宽度就可以了：

iframe {
    margin: 0 auto;
    display: block;
    width: 800px;
    border: 1px solid #ccc;
}

Answer 3

这是一种糟糕的方式，但它与所有浏览器最兼容。其他方法也存在问题。

创建高度= 100％的表格和一行包含一个单元格的表格。
将单元格的样式设置为vertical-align: middle; width: 800px; margin-right: auto; margin-left: auto;。
添加

html，body { 身高：100％; }

再一次，这是一个不好的方法，因为你使用表来组织视觉布局，但它有好处

简单
在浏览器上不需要HTML 5
与几乎每个浏览器兼容回到IE 5
不需要javascript

修正：确保在体型中指定最小宽度和最小高度，以使iFrame始终可见。

Answer 4

这可能对您有用：

<table height="100%" width="100%">
  <tr>
    <td valign="middle" align="center">
      <iframe width="800" height="500"></iframe>
  </td>
  </tr>
</table>

并在 CSS

中

body{ height:100% }

Answer 5

使用flex。更直接。

/* 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>

如何垂直对齐<iframe>？</iframe>

5 个答案: