中心四溢元素等元素

Question

里面我有一个div内的iframe这样的：

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

iframe中包含闪存YouTube视频但可能不会在这种情况下，无所谓。

我正在构建一个马赛克，因此试图使用div来裁剪iframe到合适的大小。

这是由

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

做伟大的作品，但我想中部的视频以及。对于图片，我将它们添加为背景图像，并使用

background-size: cover 

居中他们。这很整齐，因为它们会自动调整到最大可能的尺寸。但是，这不适用于视频。如果可能的话，我会尽量简单地将iframe垂直和水平居中。

Answer 1

Wrappping的IFRAME并使用text-align: center;对准水平中心

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

或

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

Answer 2

尝试：

iframe { 
    margin:0 auto; 
} 

Answer 3

的标准方式居中块元素：

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

Answer 4

将这个添加到您的css帮助？它适用于div大于section的情况。

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

http://jsfiddle.net/hvCXm/