文章来源：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、使用表格布局