文章來源：https://segmentfault.com/q/1010000008800083

給你個例子- -

html

   <div class="wrap">
        <img src="images/ico.png" alt="">
        <span>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.</span>
    </div>

css

.wrap {
/* 可無需設定高度，靠圖片高度 或者 文字的上下padding撐開高度 */
 

    border: 1px solid;
    width: 600px;
    text-align: center;
}
.wrap span{
    display: inline-block;
    vertical-align: middle;
    padding: 20px 0; /* 撐開高度 */
}
.wrap img{
    width: 10px;
    height: auto;
    vertical-align: middle;
}

其實多行居中分很多情況的- -只有行內元素，只有行內替換元素，行內與行內替換混合，建議去好好看看vertical-align與基線相關資料。

就樓主這個需求，還有其他更容易的實現方式，比如：

1、flex彈性盒子（移動端）

2、使用表格佈局