黑科技兼容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;
}

记录下来，下次遇到可以查看。也希望能帮到你们