利用绝对定位实现水平垂直居中

<style>
    .a {
        height: 200px;
        width: 500px;
        background-color: antiquewhite;
        margin: 0 auto;
        position: relative;
    }
    .b {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background-color:blue;
    }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>

重点讲一下对子div b中css的理解：
1.margin：auto实现居中的原理：自动分配剩余空间。众所周知，仅仅使用margin：0 auto就可以将块级元素水平居中，但是为什么垂直水平居中不能单纯的使用margin：atuo实现呢？因为块级元素默认的width是充满浏览器的一整行，当你给这个block设置了固定的width后（小于100%的宽度），这个block所在的这一行就拥有了可以被分配的剩余空间。但是block的高度默认是由它内部元素决定的，也就是说在整个浏览器窗口的垂直方向上，对于block来说，并不存在可以被分配的其他空间。所以，margin：auto凭借一己之力无法将块元素垂直水平居中。
2.设置绝对定位，并且top，right，bottom，left都为0代表生成了一个和父元素同等大小的边框。因此，在上下左右这四个方向，都存在了可以被分配的空间，所以margin：auto在这个时候就起了作用。（一定要记得给子元素设置宽高，不然在top,right,bottom,left等于0的影响下，子元素会铺满整个父div）。