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

逃离我推掉我的手 2022-06-12 07:08 40阅读 0赞

在我们的一般认知中，对元素使用绝对定位时，`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%`。

参考： [张鑫旭大神的博客][Link 1]

[Link 1]: http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/