填充技巧纵横比元素-垂直居中

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/-测试案例

我尝试了top：50％; 转换：translateY（-50％）; 技巧，但似乎没有任何效果！ 我知道这与使用填充而不是宽度和高度有关，但是我似乎无法以其他任何方式将元素绑定到设计中。

是否可以通过以下任一方法解决此问题：

• 使用填充技巧和将元素垂直居中的另一种方法
• 放弃填充并通过其他方式实现长宽比
• 使用伸缩盒之类的东西

任何帮助深表感谢！

Answer 1

使用这四行代码将任何内容垂直居中

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

将其应用于要垂直居中的元素的包装

（ 演示 ）

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