多行文字的水平垂直居中

单行文字垂直居中

知道容器的高度即可

html

  test

css

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

多行文字垂直居中

html

  
text1
 
  
text2

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行。

参考文章

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