对元素居中做一下总结（元素居中）

水平居中

块级元素居中： margin：0 auto；

行内和行内块元素：text-align：center；

浮动元素居中：给浮动元素套个父盒子，给父元素设置margin：0 auto；带着浮动元素居中

绝对定位元素：1. left：50%；margin-left:-自身元素宽度的一半； 

在伸缩盒子中：给父元素设置主轴居中，侧轴居中即可
（align-items:cener; justify-content:center;)

垂直居中

    文字在盒子中垂直居中：行高等于高

    图片在盒子中垂直居中：测量

    盒子在盒子中垂直居中：测量

文字垂直居中：行高等于父盒子的高度；

盒子在盒子里面垂直居中：通过测量设置margin-top：；

定位的盒子：top：50%；margin-top：-自身高度的一半。

文字和行内块元素并列的垂直居中：
给行内块元素设置vertical-align：middle； 

定位脱标元素盒子居中

1. margin: 0 auto; 只能实现标准流下的盒子居中显示

2.  position: absolute;
    left: 50%;
    margin-left: -25px;

3.  position: absolute;
    left: 50%;
    /* 也是向左移动当前元素宽度的一半 */
    transform: translate(-50%);

文字移除省略号显示

/* 设置超出部分的显示方式 */
	overflow: hidden;
	/* 文字溢出显示省略号 */
	text-overflow: ellipsis;
	/* 用来控制显示行数 */
	-webkit-line-clamp: 2;
	/* 文字显示方式,默认水平 */
	-webkit-box-orient: vertical;
	/* 将盒子转为弹性盒子 */
	display: -webkit-box;

flex布局居中

   justify-content: center;

   align-items: center;