Display an image with caption in a centered container.

HTML

<div class="imageContainer">
    <div>
        <img src="http://dummyimage.com/250" />
    </div>
    <span>...caption... ...caption... ...caption... ...caption... ...caption...</span>
</div>

CSS

.imageContainer {
    display: table;
    margin: 1em auto;
}
.imageContainer img {
    display: block;
}
.imageContainer div {
    display: table-cell;
}
.imageContainer span {
    display: table-caption;
    caption-side: bottom;
    color: #fff;
    background: rgba(0,0,0,.5);
    padding: 3px;
    text-align: center;
    vertical-align: center;
}