CSS之水平垂直居中

在css的世界里，如果我们想让一个块级元素水平居中，想必大家都知道利用margin:0 auto;嘛，这样就可以让块级元素在它的父元素中水平居中了。

列如这样：

<!DOCTYPE html>
    <head>
        <title>center</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>    
            .parent {
                width:50%;
                height:100px;
                border:1px solid black;
                position:relative;
            }
            .child {
                margin:0 auto;
                width:50px;
                height:50px;
                background:#22B14C;
            }    
        </style>
    </head>
    <body>
        <div class="parent">
               <div class="child">
             
            </div>
        </div>
    </body>
</html>

View Code