sample text center in overlay

overlayimg.html

<div class="item">
    <img src="images/1e1dd042704d8bc621f126d2beada5eb.jpg" alt="Owl Image">
    <div class="overlay-slider">
        <span class="table-overlay">
            <span class="tablecell-overlay">
                <h3>Feature Label</h3>
                <a href="#" class="btn btn-primary">Buy Now!</a> <a href="#" class="btn btn-default">More Info</a>
            </span>
        </span>
    </div>
</div>

<style>
/* Overlay */
/*overlay-slider*/
.overlay-slider {
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color: #fff;
  opacity: 0;
  padding: 3.75em 3em;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.overlay-slider:hover { opacity: 1; background: rgba(0, 0, 0, 0.5); }

/* position text center in overlay */
.table-overlay {
    display: table;
    width: 100%;
    height: 100%;
}

.tablecell-overlay {
    display: table-cell;
    vertical-align: middle;
}
</style>