绝对定位水平垂直居中

407 阅读1分钟

 

<div id='wrap'>
  <div id='item1'></div>
</div>

#wrap {
     width: 500px;
     height: 500px;
     border: 1px dotted black;
     margin: 0 auto;
     position: relative; 
   }
 
   #item1 {
     width: 100px;
     height: 100px;
     background-color: purple;
     /* 核心代码 */
     position: absolute;
     margin: auto;
     top: 0; /*垂直居中*/
     bottom: 0;  /*垂直居中*/
     left: 0;   /*水平居中*/
     right: 0;  /*水平居中*/
     
   }

文字超出隐藏

**1,css超出一行用点表示**

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

 

**2,css超出二行用点表示**

    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;