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

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

实现截图如下：

解决办法是flex实现，具体如下：

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;
}