Centering image in animated div - sticky to left side of screen

Question

I'm making a sidebar live chat button, however I'm unable to make the image which vertically says: "Live chat" be in the center of the container.

Despite some efforts, I'm unable to make the image show in the correct place.

HTML

<a id="xfmd" href="#">
   <span class="image"></span>
</a>

CSS

#xfmd
{
    position:fixed;
    display:block;
    top:40%;
    width:35px;
    height:95px;
    padding:5px;
    left:-10px;
    z-index:10;
    cursor:pointer;
    background-color:#0094e8;
    -webkit-border-top-right-radius:5px;
    -webki-border-bottom-right-radius:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px
}

#xfmd .image
{
    display:block;
    width:17px;
    height:83px;
    margin:1px 6px 6px 8px;
    background:url(http://daemex.com/assets/img/ui.png) no-repeat 0
}

#xfmd:hover
{
    left:0;
    transition:.3s;
    -webkit-transition:.3s,
}

@media (max-width:992px) {
    #xfmd
    {
        top:35%
    }
}

@media (max-width:768px) {
    #xfmd
    {
        width:25px;
        background-position:10px 50%;
        top:30%
    }
}

@media (max-height:420px) {
    #xfmd
    {
        top:20%
    }
}

Answer 1

This answer has worked for me, and is by @TM Dinesh - it involves removing media queries.

HTML

<a id="xfmd" href="#">
   <span class="image"></span>
</a>

CSS

#xfmd
{
    position:fixed;
    display:block;
    top:40%;
    width:35px;
    height:95px;
    padding:5px;
    left:-10px;
    z-index:10;
    cursor:pointer;
    background-color:#0094e8;
    -webkit-border-top-right-radius:5px;
    -webki-border-bottom-right-radius:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    vertical-align:middle;
}

#xfmd .image
{
    display:block;
    width:17px;
    height:83px;
    margin:1px 6px 6px 8px;
    background:url(http://daemex.com/assets/img/ui.png) no-repeat 0;
    vertical-align: middle;
}

#xfmd:hover
{
    left:0;
    transition:.3s;
    -webkit-transition:.3s,
}