html部分

     
    
      
               - -居中- -     
      
     

　　css部分 

一、text-align:center;vertical-align:middde 实现

.parent{
           width: 400px;        height:400px;        background:#666666;        text-align: center;        font-size: 0px;    }    .child{
           font-size: 16px;        background: #ccc;        display: inline-block;        vertical-align: middle;    }    .parent:after{
           content: '';        width: 0;        height: 100%;        display: inline-block;        vertical-align: middle;    }/*    .add{         width: 0;         height: 100%;         display: inline-block;         vertical-align: middle;    }*/

　　也可不用伪元素after，在child的div后面写一个span  class为add的标签。

　　font-size:0px;解决当child元素内的字超过一行 垂直居中失效问题。

 

二 、 display:table-cell 实现

.parent{
           width: 400px;        height:400px;        background:#666666;        display: table-cell;        text-align: center;        vertical-align: middle;    }    .child{
           background: #cccccc;        display: inline-block;    }

　　　转化为table元素。

 

三 、定位 top left right bottom margin:auto 实现

.parent{
           width: 400px;        height:400px;        background:#666666;        position: relative;    }    .child{
           width: 100px;        height: 100px;        position: absolute;        top: 0px;        left: 0px;        right: 0px;        bottom:0px;        margin: auto;        background: #ccc;    }

　　子元素需设宽高，如果不设会和父元素同宽高。

 

 四、定位 top left margin实现

.parent{
           width: 400px;        height:400px;        background:#666666;        position: relative;    }    .child{
           width: 100px;        height: 100px;        background: #cccccc;        position: absolute;        top: 50%;        left: 50%;        margin-left:-50px;        margin-top: -50px;    }

　 定位后 child的左上角在父元素的正中央，需要改变child的位置，让child和parent中心点在同一位置。

 

 五、定位和css3 transfrom 实现

.parent{
           width: 400px;        height:400px;        background:#666666;        position: relative;    }    .child{
           background: #cccccc;        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%,-50%);    }

　　translate(x,y) 的50%相对于自身来计算。

 

六、display:flex 弹性盒 实现

.parent{
           width: 400px;        height:400px;        background:#666666;        display: flex;        justify-content: center;        align-items: center;    }    .child{
           background: #cccccc;    }

　　默认flex-direction:row;是水平排列，

　　　　justify-content是主轴方向,此时相当于是X轴。

　　　　align-items:center;是交叉轴方向，此时相当于是Y轴。

　　若设置flex-direction:column;为竖直排列，

　　　　justify-content为Y轴，align-items为X轴。

 

 

 

 

 

 

 

 

 

 

 

display:-webkit-box!important;

overflow:hidden;

text-overflow:ellipsis;

-webkit-box-orient:vertical;

-webkit-line-clamp:3;