文字上下居中，是經(jīng)常要用到的效果，CSS中，多種方法使得文字可以上下居中：

1、CSS，使用 flex，使文字上下居中：

    <div class="box" style="display: flex;align-items: center">
        <img src="http://m.cheanjie.com/public/images/logo.png">上下居中
    </div>

兼容：IE10+

2、在css中，使用絕對定位和transform

CSS代碼：
<style type="text/css">
    .box{
        position: relative;
        height:100px;
        background-color: #9F9F9F
    }
    .box1 span{
        position:absolute;
        left: 0;
        top:50%;
        transform: translate(0, -50%);
    }
</style>

HTML代碼：
    <div class="box">
        <div class="box1">
            <span>上下居中</span>
        </div>
    </div>

兼容：IE7+