css常用

1、垂直水平居中

1.1绝对定位且已知宽高
{
      position:absolute;
      top:50%;
      left:50%;
      margin-top:-3em;
      margin-left:-7em;
      width:14em;
      height:6em;
}
1.2绝对定位+未知宽高+translate
{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
}
1.3flex——最简单，但注意兼容性问题
{
      display:flex;
      align-items:center;
      justify-content:center;
}

2、文本末尾添加省略号

2.1宽度固定，适合单行显示
{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
}
2.2宽度不固定，适合多行,只适用于webkit内核浏览器以及移动端显示——兼容性差
{
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:3;    //注：外层高度=设置数，否则会出现下一行正常显示的情况
      -webkit-box-orient:vertival;
}

3、制造文本的模糊效果

{
      color:transparent;
      text-shadow:0 0 2px rgba(0,0,0,0.5);
}