前端常见功能实现-css

元素的居中

flex布局实现

父元素：

display:flex;
just-content:
center;align-items: center;

float实现

原理是将子元素相对父元素偏移50%，此时子元素左上角在父元素的中心点，再将子元素偏移50%，使子元素的中心点到左上角
缺点是需要父子元素的宽高固定
父元素：

position： relative

子元素：

position： absolute；
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

同级元素的水平居中

flex布局实现

父元素

display: flex;
justify-content: space-around;
align-items: center;

单行文本省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本省略

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;