div内容垂直居中

1.嵌套div可使用Flexbox布局

      在父元素上设置display: flex;和align-items: center;属性,子元素就可以在父元素中上下居中。

      align-items:center适用于所有使用了flex布局的容器。当一个容器元素设置了display:flex，align-items:center将会把容器内所有项目在垂直方向上居中对齐。

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

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

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

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

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

4.display:table布局

多行内容使用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>