子元素水平垂直居中

需求：如果想让一个块级元素水平垂直居中，在任何页面都能等比显示。

<style>
    html,body,.father{     /*height不具有继承性质，必须是htmlbody两个的height都为100% 才能撑开*/
    position:relative;
    width:100%;height:100%;/*一定要给height:100%;*/
    padding:0;margin:0;
    }
    .child{
    position:absolute;left:50%;height:50%;
    width:100px;height:100px;
    margin:-50px 0 0 -50px;
    }
</style>
<div class="father">
    <div class="child">水平垂直居中</div>
</div>

在移动元素的时候不用使用css3 的 transform：translate() 来移动元素，要用margin：来控制 兼容性问题！