css - 包含已知大小的容器内的内容并将其居中

Question

我们有一个已知大小的容器。

在里面，我们有未知高度的内容。

我们需要将内容包含在容器中，同时水平和垂直居中。

内容由 block 组成:label, image, label:

对于比容器短的内容，我设法做到了这一点，但在其他情况下就没有运气了。示例:http://jsbin.com/banava/4/edit?html,css,output

Answer 1

#content-wrapper {
    text-align: center;
    height: 200px;
    width: 200px;
    display: table;
}

#img-wrapper {
    width: 100%;    
    height: 100%;
    vertical-align: middle;   
    display: table-cell;
}

#img-wrapper label {
    display: block;  
    height: 25px;
    line-height: 25px;
}

#img-wrapper img { 
    max-height: 150px;
}

http://jsfiddle.net/L38jg9sr/15/