CSS：佈局 - 水平垂直居中

1. 絕對定位 + 負 Margin

原理：首先利用 absolute 定位把容器塊 左頂角 對準瀏覽器中心，而後再使用 負 margin 把容器塊向左移動自身寬度的一半，向上移動自身高度的一半，便可以把容器塊的中心移到瀏覽器中心。

優勢：兼容性好
缺點：須要知道寬高，不夠靈活

.container {
    width: 600px; 
    height: 400px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    margin-left: -300px;    /* 寬度的一半 */
    margin-top: -200px;     /* 高度的一半 */
}

2. 絕對定位 + Transform

原理：首先利用 absolute 定位把容器塊 左頂角 對準瀏覽器中心，而後再使用 CSS3 transform 的 translate(x,y) 把容器塊向左(x)移動自身寬度的一半，向上(y)移動自身高度的一半，便可以把容器塊的中心移到瀏覽器中心。

優勢：不須要知道寬高，靈活
缺點，兼容很差，在移動設備上建議使用

.container {
    width: 600px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 自身尺寸的一半 */
}

3. 絕對定位 + 自動 Margin

原理：瀏覽器自動計算絕對定位的容器塊上下左右外邊距。
優勢：靈活切兼容性好（IE8+）
缺點：適用於自己有尺寸的元素（好比圖片），對於段落等必須顯式設置其寬高

.container {
    width: 600px;
    height: 400px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

4. CSS3 Flexbox

優勢：不須要知道寬高
缺點：兼容性很差，在移動設備上建議使用

.container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

5. Table display

優勢：兼容性好
缺點：增長了無用的 HTML 結構

.vertical-wrapper {
    width: 100%;
    height: 100%;
    display: table;
    .vertical {
        display: table-cell;
        vertical-align: middle;
        & > * {
            vertical-align: middle;
        }
        span {
            display: inline-block;
        }
        img {
            display: inline-block;
        }
    }
    &.center {
        .vertical {
            text-align: center;
        }
    }
}