在响应式 div 中居中文本

Question

我试图在响应式 div 中垂直居中一些文本。我无法弄清楚。如果我能得到一些帮助，我将不胜感激。

http://jsfiddle.net/X923f/1/

谢谢。

<style>    
.thumb {
    float: left;
    margin: 0px;
    padding: 0px;
    position:absolute;
    height:100%; 
    width:100%; 


}

.thumb img {
    width: 100%;
    padding: 0;
}
.thumb > div {
    background-color: rgba(0,0,0,0.1);
    opacity: 0;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;

}
.thumb:hover > div {
    display: block;
    opacity: 1.0;

}
.thumb > div div {
}

#text {
 vertical-align: middle;
  position: relative;
  z-index: 2;
  display: inline-block;
}


</style>

Answer 1

这通常是我们在响应式 div 中垂直居中某些文本的方式：

.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle 
}

这是你想要垂直居中的 DIV <div class="container">