<div class="item">
    <img src="test.jpg" />
    <div class="overlay">
        <a href="#">Some long content</a>
    </div>
</div>

.item {
    position: relative;

    img {
        position: relative;
        z-index: 1;
    }

    .overlay {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.5);
        text-align: center;

        a {
            color: #fff;
        }
    }
}

.item {
    display: table;

    .overlay {
        display: table-cell;
        vertical-align: middle;
    }
}

.item .overlay:before {
  content:" ";
  display:inline-block;
  vertical-align:middle;
  height:100%;
}
.item .overlay a {
  display:inline-block;
  vertical-align:middle;
  color: #fff;
}

<div class="item">
    <img src="http://placehold.it/350x150.jpg" />
    <div class="overlay">
        <div class="inner-container">
            <div class="inner-cell">
                <a href="#">Some long content</a>
            </div>
        </div>
    </div>
</div>

.item {
    position: relative;
    width: 350px;
    display: table;
}
    .item .overlay {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.5);
        text-align: center;
        width: 100%;
        height:100%;
        vertical-align: middle;
    }
        .inner-container{
            width: 100%;
            height: 100%;
            display:table;
        }
        .inner-cell {
            display:table-cell;
            vertical-align: middle;
            text-align: center;
        }
            .item .overlay a {
                color: #fff;
            }

.item .overlay{
   top:50%;
   -webkit-transform:translateY(-50%);
}