应用场景分析：
一、当你的文字限定行数，超出部分的文字用省略号显示。
（有两个使用场景：1、单行 2、多行）
// 单行
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
// 多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: ;
overflow: hidden;
二、当你的高度不定要垂直居中时，这里我们用盒模型布局。
（这里要对盒模型做兼容性处理,不然有些手机系统不兼容的。切记~~~~~~~）
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
justify-content: center;
align-items: center;
有些属性不懂的，可以接着看。懂的到这里就ok了：
justify-content: center;justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items: center;align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。