css - Contain and center content inside of container with known size -

css - Contain and center content inside of container with known size -

we have container known size.

inside, have content unknown height.

we need contain content in container while centered horizontally , vertically.

the content consists of blocks: label, image, label:

i managed accomplish content shorter container, no luck in other case. example: http://jsbin.com/banava/4/edit?html,css,output

#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/

css