我们曾经在
iphone5真机，绝对定位的兼容问题
这篇文章指出 采用的是
flex
+
positon:absolute
来布局时，遇到了低版本苹果机的兼容问题，而且后来还用了媒体查询的方式进行折中处理。
后来，同事反映在vivo xplay 5A 也遇到了和iphone5机型一样的兼容问题。由于vivo机型就不是很好媒体查询方式特别处理了，于是就不得不深究这个原因，并找到替代方案。
一、问题重现
<!DOCTYPE html>
<title></title>
</head>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background-color: pink;
position: relative;
.div2 {
width: 200px;
height: 100px;
background-color: green;
.div2{
position: absolute;
.div1{
display: flex;
justify-content: center;
/*justify-content: flex-end;*/
</style>
<div class="div1">
<div class="div2"></div>
</body>
</html>
我们设置了
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{
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
