JSFiddle - React, Tailwind, and code Playground

HTML

<div class="DivParent">
    <a href="#"> <div class="DivWhichNeedToBeVerticallyAligned">
    </div></a><div class="DivHelper"></div>
</div>

CSS

.DivParent {
  width: 218px;
height: 100px;
border-top: 1px solid #B5BEC4;
background: #808487;
background: -webkit-gradient(linear, left top, left bottom, from(#8D9296), to(#808487));
background: -webkit-linear-gradient(top, #8D9296, #808487);
background: -moz-linear-gradient(top, #8D9296, #808487);
background: -ms-linear-gradient(top, #8D9296, #808487);
background: -o-linear-gradient(top, #8D9296, #808487);
padding: 5px;
margin: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-decoration: none;
vertical-align: middle;
    text-align:center;
}

.DivParent a
{
    
 display:block;   
    width:100%;
    height:100%;
}

.DivWhichNeedToBeVerticallyAligned {
display: inline-block; vertical-align: middle; border-width: 0px; border-style: none; background-image: url(http://static.monstermmorpg.com/images/csssprites/AllMaps.png); background-color: transparent; margin:auto; background-repeat: no-repeat; background-position: -550px -100px;  width: 200px; height: 50px;   
}
  

.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}