Html 在动画分区中居中图像-粘在屏幕左侧

我正在制作一个侧边栏直播聊天按钮，但是我无法使垂直显示“直播聊天”的图像位于容器的中心

尽管做了一些努力，我还是无法在正确的地方展示图像

HTML

---

这个答案对我来说很有效，@TM Dinesh提供了答案——它涉及到删除媒体查询

HTML

---

垂直居中？或者水平居中？你能创建一个小提琴/弹琴来显示问题吗？检查你的媒体质询，它会影响图像的顶部%。在这个链接中，我没有写媒体问答。@TMDinesh谢谢！

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

#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%
    }
}

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

#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,
}