1.单行内容可以设置height和line-height相同：

div { height:30px; line-height:30px; width:100px; overflow:hidden; }

2.多行内容使用css3的transform属性

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}

transform在嵌套中可能50%取值为非预期，而导致不居中。

3.多行内容使用display:table 将子元素设置为display:table-cell 和vertical-align:middle

.wrapper{

   display: table;

}

.cell {

  display: table-cell;

  vertical-align: middle;

}

html结构如下：

    <div class="wrapper">

        <div class="cell">

             <div class="title-text">第一行内容</div>

             <div class="text-sm">第二行内容</div>

         </div>

    </div>