html - padding trick 纵横比元素——垂直居中

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% ;变换:翻译Y(-50%)；元素上的技巧，但似乎没有任何效果!我知道这与使用填充而不是宽度和高度有关，但我似乎无法以任何其他方式将元素装配到设计中。

是否有可能解决这个问题:

• 使用填充技巧和另一种使元素垂直居中的方法
• 放弃填充并通过其他方式实现纵横比
• 使用 flex 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%;
}