看似简单的vertical-align:middle，实际使用的时候经常发现不好用，涉及到行内对准基线问题，参见http://snowcoal.com/SCBee/0w50.html，比较复杂，这里只总结几种解决方案

以图片居中显示为例

1.在父元素中增加display:table-cell，vertical-align 写在在父元素中

.btn{
    display: table-cell;
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
}

.btn img{
   width: 100px;
}

<div class="btn">
    <img src="img/sh.png">
</div>

2.在父元素中增加空的span元素，并设置其高度为100%，vertical-middle居中

.btn{
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    text-align: center;
}

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

.btn img{
   width: 100px;
   vertical-align: middle;
}

<div class="btn">
    <span></span>
    <img src="img/sh.png">
</div>

3.父元素line-height 100% 和子元素vertical-align:middle

.btn{

    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 1px solid #eee;

}
.btn img{
   vertical-align: middle;
    width: 100px;
}

<div class="btn">
    <img src="img/sh.png">
</div>

4.采取display:flex居中

.btn{

    width: 200px;
    height: 200px;
    border: 1px solid #eee;

    display: flex;
    justify-content:center;
    align-items: center;
}
.btn img{
    width: 100px;
}
<div class="btn">
    <img src="img/sh.png">
</div>

5.绝对定位

.btn{

    width: 200px;
    height: 200px;
    border: 1px solid #eee;

    position: relative;

}
.btn img{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -50px;
    margin-top: -50px;
}

<div class="btn">
    <img src="img/sh.png">
</div>

6.背景图

.btn{

    width: 200px;
    height: 200px;
    border: 1px solid #eee;

    background-image: url(img/sh.png);
    background-size: 50%  50%;
    background-position: center center;
    background-repeat: no-repeat;

}

<div class="btn">

</div>