多行文字的水平垂直居中

单行文字垂直居中

知道容器的高度即可

html

<div class="wrapper">
  test
</div>

css

.wrapper {
  height: 3em;
  line-height: 3em;
  border: 1px solid #00a5d7; 
}

多行文字垂直居中

html

<div class="wrapper">
  <p>text1</p> 
  <p>text2</p>
</div>

css

.wrapper {
  display: table-cell;
  vertical-align: middle; //Your must add this style，the default is baseline
  height: 5em;
}

多行文本溢出用省略号表示

.box {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

其中-webkit-line-clamp就是控制行数的，是3就是显示3行，3行结束点点点，如果是2则最多2行。

参考文章

大小不固定的图片和多行文字的垂直水平居中