Question

我有：

<div>
    <iframe></iframe>
</div>


div {
    width: 100%;
    height: 400px;
    overflow: hidden;
}
iframe {
    width: 940px;
    height: 400px;
    margin: 0 auto;
    display: block;
}

iframe将溢出div，导致右侧的“缺失部分”。我需要以iframe为中心，使得这个“缺失的部分”在两侧都是相同的。保证金：0自动似乎没有削减它。

（iframe是将其置于上下文中的视频）

Answer 1

如何使用负边距（作为iframe的一半宽度）如下：

iframe {
    width: 940px;
    height: 400px;
    margin-left: -470px /* <-- 940px / 2 */
}

或将position: relative;与left: -470px;一起使用。

margin: 0 auto对于比其父母更宽的孩子不起作用。即使您将display属性更改为block。

来自 Spec （正常流程中的10.3.3块级，未替换元素）：

如果width不是auto而border-left-width + padding-left + width + padding-right + border-right-width（以及任何不是margin-left）的margin-right或auto大于包含块的宽度，然后是auto的任何值对于以下规则，margin-left或margin-right会受到处理为零。

如果CSS3是一个选项，您可以为iframe设置位置属性，包括否定translateX，以便在父级时保持元素居中调整大小：

iframe {
  width: 940px;
  height: 300px;
  background-color: orange;

  position: relative;
  left: 50%; 
  transform: translateX(-50%);
}

<强> WORKING DEMO

对于不支持CSS3 transform的旧浏览器，您需要添加一个额外的元素作为包装。

在这种方法中，子（在您的情况下为iframe）由另一个名为.wrapper的元素包装，如下所示：

<div class="parent">
  <div class="wrapper">
    <div class="child"></div>
  </div>
</div>

.parent {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.wrapper {
  position: absolute;
  left: 50%;
}

.child {
  width: 940px;
  height: 300px;  
  position: relative;
  left: -50%;
}

<强> UPDATED DEMO

Answer 2

iframe是内联元素。添加display: block;以让margin: 0 auto;工作。

围绕其容器的溢出元素居中

2 个答案: