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

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

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

• 使用填充技巧和另一种垂直居中元素的方法
• 放弃内边距并通过其他方式实现宽高比
• 使用 flexbox 或其他东西

非常感谢任何帮助!

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