关于绝对定位元素居中的流体特性和top:50%的兼容性问题

在我们的一般认知中，对元素使用绝对定位时，margin: auto肯定就失效了，margin：auto只对指定了宽高的元素生效，是通过计算得来的。绝对定位元素脱离文档流，理论上自然是无法使用margin:auto的。

但事实上并非如此，我们往往在不考虑浏览器兼容性的情况下使用 top: 50%; transform:translate(0, -50%)来实现垂直居中或者对明确知道高度的元素使用负margin来居中，但其实我们还能使用position: absolute和margin: auto来实现居中，这应该是一种更优雅的处理居中。

比如

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

这样元素就居中了，感觉很神奇，为什么margin: auto有效？答案是当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了

如果只有left属性或者只有right属性，则由于包裹性此时.element宽度是0。但是，在本例中，因为left/right同时存在，因此宽度就不是0，而是自适应于.element包含块的padding box宽度，也就是随着包含块padding box的宽度变化，.element的宽度也会跟着一起变。

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样。
但到这还没结束，有一个坑需要注意一下，我们都知道，对一个元素使用top: 50%，生效的前提是包含块有height， 否则无效( when you us property top on an element, the parent of that element needs to have a static height set )

看看我工作中遇到的一个dialog的样式

.pgc-dialog {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

没有写固定的height，这个在一些新浏览器比如新版chrome会因为你有了绝对定位且有对立方向定位属性，认为你的高度是等于当前视口高度，然后如果你对pgc-dialog里面的dialog设置top: 50%，此时生效， 但如果是稍微老一些但浏览器，老版本chrome,firefox，ie， 360浏览器（测试的是7.0版本目前还有很多用户在用）， 则会认为top: 50%不生效，在上线后，有部分用户就反馈页面出现定位问题。目前觉得最好的解决办法就是给 .pgc-dialog加一条属性 height: 100%。

参考： 张鑫旭大神的博客