中心溢出元素在其他元素内

Question

我在div中有一个iframe：

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

iframe在flash中包含youtube视频，但在这种情况下可能无关紧要。

我正在构建马赛克，因此尝试使用div将iframe裁剪为合适的大小。

这是由

完成的

.section
    {height: 251px;
    width: 198px;
    overflow: hidden}

效果很好，但我想将视频集中在一起。对于图像，我将它们添加为背景图像并使用

background-size: cover 

以他们为中心。这很简洁，因为它们会自动重新缩放到最大可能的大小。但是，这不适用于视频。如果可能的话，我宁愿只是垂直和水平地居中iframe。

Answer 1

将此添加到您的css帮助中吗？如果div大于section，它可以工作。

section div {
    margin-top:-50%;
    margin-left:-50%;
}

http://jsfiddle.net/hvCXm/

Answer 2

包装iframe并使用text-align: center;对齐水平中心

div {
text-align: center;
display: block;
}

或

iframe { 
margin: 0 auto; 
display: block;
}

Answer 3

尝试：

iframe {
    margin:0 auto;
}

Answer 4

中心块元素的标准方法：

iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
}