Padding trick aspect ratio element - Vertical centering - html

Question

I'm trying to vertically center an element which uses padding-bottom to create the required aspect ratio (for a video). I want to have top and bottom black borders just like when a movie is displayed on a taller aspect ratio than it was filmed on:
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/ - test case
I have tried the top:50% ; transform:translateY(-50%) ; tricks on the element, but nothing seems to be working! I know it's to do with using padding instead of width and height, but I cannot seem to rig the element to the design any other way.
Is it possible to solve this problem with either:
Using the padding trick and another way of vertical centering the element
Ditching the padding and achieving aspect ratio through another means
Use flex box or something
Any help is much appreciated!

Answer 1

Vertically center anything with these four lines of code
position: relative;
top: 50%;
transform: translateY(-50%);
max-height: 100%;
Apply this to a wrapper of the element that you want to vertically center
(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%;
}