[Bootstrap] Text overlay center inside the image

markup

<div class="row" id="box-search">
    <div class="thumbnail text-center">
        <img src="img/cafe.jpg" alt="" class="img-responsive">
        <div class="caption">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, quisquam?</p>
        </div>
    </div>
</div>

style

.thumbnail {
    position: relative;
}

.caption {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
}