当flex容器中包含absolute元素时

我们曾经在 iphone5真机，绝对定位的兼容问题 这篇文章指出 采用的是 flex + positon:absolute 来布局时，遇到了低版本苹果机的兼容问题，而且后来还用了媒体查询的方式进行折中处理。
后来，同事反映在vivo xplay 5A 也遇到了和iphone5机型一样的兼容问题。由于vivo机型就不是很好媒体查询方式特别处理了，于是就不得不深究这个原因，并找到替代方案。

一、问题重现

我们设置了justify-content: center;，不同机型显示区别如下：

在PC端和iphone5以上的机型中：居中显示（正常）

在iphone5真机上的浏览器打开：偏右显示（异常）

有趣的是，我们把 justify-content: center; 改成 justify-content: flex-end; 时，它们的表现也不一致：

在PC端和iphone5以上的机型中：在容器内的最右端（正常）

在iphone5真机上的浏览器打开：跑到容器外了（异常）

当我们把绿色块改成相对定位时.div2{ position: relative; }，就会发现flex布局在任何机子上都正常了。
可见，是因为 flex布局 和 绝对定位abosolute 起冲突了。

二、 问题分析

我们到技术文档查阅一下flex布局的一些说明https://www.w3.org/TR/css-flexbox-1/#abspos-items，可以看到如下一段话：

翻译过来就是：

绝对定位的元素是不参与flex布局的。

尽管文档规定如此，但我们在高版本的机型里面，却能实现两者的配合使用。也许将来这种兼容差异就不存在了，flex容器里面也可以有绝对定位元素了。

三、替代方案

问题原因是找到了，但还是得解决实际问题。
目前个人的需求是：绝对定位元素要实现水平居中，但又无法提前知道该元素的宽度。
最后在小伙伴的帮助下，找到了一种margin:auto的解决方法：

.div2{
        position:absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin:auto;
    }

该方法的兼容性还没有具体测试，但目前来讲，能适配手头上的所有机型（包括iphone5）。

参考文献：
flex布局中的绝对定位：嗯，完美。还给出了w3.org的技术文档说明。
在flex布局中，不要使用绝对定位（fixed、absolute）：一篇只说明现象，不给出具体原因分析的，同病相怜的家伙。
实现绝对定位元素水平垂直居中的两种方法：完美啊~给出了一个很漂亮的margin：auto方案啊！