今天需要将文本垂直居中，就是一行是垂直居中，多行也是垂直居中。
效果如下
实现代码（同事提供）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.listDiv{
display: flex;
width: 300px;
height: 60px;
padding: 10px;
background: #ccc;
margin-bottom: 10px;
}
.listDivLeft{
flex:1;
height: 60px;
overflow: hidden;
}
.listDivLeft span{
display: table-cell;
height: 60px;
line-height: 30px;;
vertical-align: middle;
text-decoration: none;
}
.listDivRight{
padding-left: 10px;
}
.listDivRight img{
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div class="listDiv">
<div class="listDivLeft">
<span>我是一条很长很长的文字，不信你看，哎呦，还是真是，玩不了叻。</span>
</div>
<div class="listDivRight">
<img src="http://images.cnblogs.com/cnblogs_com/lovesong/508505/t_f.jpg"/>
</div>
</div>
<div class="listDiv">
<div class="listDivLeft">
<span>我就只一行，没有了。</span>
</div>
<div class="listDivRight">
<img src="http://images.cnblogs.com/cnblogs_com/lovesong/508505/t_f.jpg"/>
</div>
</div>
</body>
</html>
演示地址