中心四溢元素等元素

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/