Элемент пропорции элемента для заполнения - Вертикальное центрирование

Question

Я пытаюсь вертикально центрировать элемент, который использует padding-bottom для создания требуемого соотношения сторон (для видео). Я хочу, чтобы верхние и нижние черные границам просто нравятся, когда фильм появятся на более высокие пропорциях, чем это было снято на:

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%); трюки на элементе, но ничего не работает! Я знаю, что это связано с использованием прокладки вместо ширины и высоты, но я, похоже, не смогу выстроить элемент в конструкцию любым другим способом.

Можно ли решить эту проблему с либо:

• Используя заполнени трик и другой способ вертикальной центрирующий элемент
• Угробление отступы и достижения соотношения сторон через другое средство
• Использование гибких box или что-то еще

Любая помощь очень ценится!

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%; 
}