将元素中的内容垂直居中，没有高度，但填充

Question

小提琴： http://jsfiddle.net/dbwvx42s

问题描述：我正在使用Bootstrap在一个部分中创建一些列。该部分的高度为零（例如height: 0），但底部填充为56.25％，以保持页面上其他内容的宽高比（16：9）。

我遇到的问题是如何在这个零高度的填充元素中垂直居中内容。我试过一个flexbox解决方案无济于事。我尝试了内联阻止内容并使用vertical-align，这也是一个禁忌。我已经没法了！

任何帮助表示感谢。

代码：

#section-1 {
    background-color: #0099cc;
    color: #fff;
    height: 0;
    padding-bottom: 56.25%;
}

Answer 1

您可以创建包含内容的绝对定位的子元素：

＆＃13;

＆＃13;

#section-1 {
  
  position: relative;
  
  background-color: #0099cc;
  color: #fff;
  height: 0;
  padding-bottom: 56.25%;
}

#section-1 div.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
}

＆＃13;

<div id="section-1">
  <div class="content">
    Content goes here  
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在，div.content可以用作正常大小的div。