列表标题一/两行垂直居中展示

在开发中会遇到很多list组件，例如左边一个img，右边是内容介绍。
内容介绍的最上部往往是内容的标题，标题在进行省略ellipsis设置时，需要考虑产品需求：
比如我在项目中，设计希望两行充满高度，一行则垂直居中。

实现截图如下：

解决办法：

1、flex实现（需要注意ios8等系统的兼容性）

html

<div class="hd"><span>北京北京博泰酒店北京博泰酒店</span></div>
<br>
<div class="hd"><span>北京</span></div>

css

.hd {
    width: 100px;
    height: 54px;
    display: flex;
    /* 左右居中 */
    /* align-items: center; */
    /* 上下居中 */
    justify-content: center;
    flex-direction: column;
    background-color: red;
}
span {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 18px;
    color: #333;
}

2、line-height与vertical-align共同实现

html

	<div class="box">
		<div class="content">我是多多多多多多多多多多多多多多多行文本</div>
	</div>

css

	.box {
		line-height: 200px;
	}
	.content {
		display: inline-block;
		line-height: 20px;
		vertical-align: middle;
	}

注解：
1、inline-block产生一个“行框盒子”，附带“幽灵空白节点”，使得外部的line-height起作用；
2、内联元素默认基线对齐，通过vertical-align调整多行文本垂直位置。

代码参照《CSS世界》