黑科技兼容H5高寬不固定水平垂直居中

這真的是需要記下來的黑科技，不得不感嘆牛人真的很牛

首先，html的結構是這樣的：

<div class="box">
    <div class="main">
        <div>內容不固定</div>
        <div>內容不固定</div>
    </div>
</div>

一開始的做法是大家都知道的用絕對定位，然後通過 css3 的 translate 矯正，代碼如下：

.box{
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    background: #000;
    text-align: center;
}
.main{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);//已加各種前綴
}

這個做法，目前測到的 iPhone 以及部分 Android 手機都 OK，但是測試測到一部小米4的手機在瀏覽器上打開，發現樣式亂了，translate 不成效，導致頁面 left：50%，top:50%。
再者，嘗試用另外一種做法，用 display：flex 去實現，代碼如下：

.box{
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
    text-align: center;
    vertical-align: middle;
    background: #000;
}
.main{
    width: 100%;
    display: flex;
    flex-direction: column;
    just-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);//已加各種前綴
}

這個方法兼容性已不錯，測過 iPhone 和部分 Android ，這時候的小米4已經能很好的顯示了，不會有樣式亂的問題，但是唯一存在的問題是並不能垂直居中，只是水平居中，gggggg。
最後，諮詢了一下老大，老大發了一段代碼過來，一黑科技就這樣產生了，不得不佩服
代碼如下：

.box{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
    text-align: center;
    background: #000;
}
.box:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.main{
    width:100%;
    display: inline-block;
    vertical-align: middle;
}

記錄下來，下次遇到可以查看。也希望能幫到你們