css 元素水平垂直方向居中

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

    .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;
    }*/