css 元素水平垂直方向居中

　　html部分

<div class="parent">
    <div class="child">
        - -居中- -
    </div>
</div>

　　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:;
        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;