css 元素水平垂直方向居中

一、text-align:center;vertical-align:middde；

　　html部分

<div class="parent">
    <div class="child">
    </div>
</div>

　　css部分

    .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元素内的字超过一行 垂直居中失效问题。

二 、定位 top left right bottom margin:auto 来实现；