填充技巧縱橫比元素 - 垂直居中

Question

我試圖垂直居中使用填充底部創建所需長寬比（對於視頻）的元素。我想有當被顯示在高寬比的電影頂部和底部的黑色邊框就像比它是在拍攝：

body{ 
    padding:0; 
    margin:0; 
    position:relative; 
    display:block; 
} 
main{ 
    background: url(http://placekitten.com/1280) no-repeat center center; 
    background-size: cover; 
    width:100%; 
    padding-top:56.25%; 
    width:100%; 
} 

http://jsfiddle.net/y4tcufo5/ - 測試用例

我已經試過了頂部：50％ ; transform：translateY（-50％）;在元素上的技巧，但似乎沒有任何工作！我知道這是使用填充而不是寬度和高度，但我似乎無法以任何其他方式將元素綁定到設計上。

是否有可能與任一來解決這個問題：

• 使用填充特技和定心元件
• 開溝填充和通過另一手段
• 使用Flex實現寬高比的垂直另一種方式盒子或東西

任何幫助非常感謝！

Answer 1

這些四行代碼垂直居中什麼

position: relative; 
top: 50%; 
transform: translateY(-50%); 
max-height: 100%; 

應用此要垂直居中

（Demo）

HTML元素的包裝

<div class="wrap"> 
    <main></main> 
</div> 

CSS

html, body { 
    padding:0; 
    margin:0; 
    height: 100%; 
} 
main{ 
    background: url(http://placekitten.com/1280) no-repeat center center; 
    background-size: cover; 
    width:100%; 
    padding-top:56.25%; 
} 
.wrap { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    max-height: 100%; 
}