absolute与margin实现完全垂直布局（IE8+）

原理

我们常常使用margin:0 auto;来实现块水平居中布局，这是因为默认情况下块级元素会占满一整行，若其设置了宽，之前占满一行的特性被覆盖掉了，从而产生了空白空间，而margin的auto值就是用来自动分配这些空间（两边auto，剩余宽度对半分）；
可是为什么没法垂直居中呢？块级元素的宽会占满一行，高度可没有这种特性，当然也不存在空白空间了。（这样说可能有点不太准确，但我的理解是这样）；
我们知道absolute如果将top/bottom/left/right都设为0，改元素就会拉伸从而占满父元素，此时我们为它设置宽高去覆盖此特性，从而会产生空白空间，margin:auto;等分配空间，从而达到完全居中的效果。（经测试IE8及以上版本才支持此方法）

实现

.father1{
        height:200px;
        position: relative;
        background: #eee;
    }
    .son1{
        position:absolute;
        top:0;
        right: 0;
        bottom:0;
        left: 0;
        height:100px;
        width:500px;
        background: pink;
        margin:auto;
    }

    <!-- absolute与margin居中 -->
    <div class="father1">
        <div class="son1">IE8+</div>
    </div>

---

magrin的其他一些应用（代码）：
https://github.com/screamingColor/save/blob/master/test/margin.html