让绝对定位的元素，实现居中的三种办法

一、绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是：1，先向右，向下移动百分之50，然后在利用margin减去自身宽度的一半（这个一定不能忘了减去哦，负值） .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 / margin-left: -300px; / 宽度的一半 / } 但，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。 二、绝对定位元素的居中实现 CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，于是，我们可以：利用transform来实现，就解决了margin减半的问题。 .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */ }

于是乎，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的。 然，问题很明显，兼容性不好。IE10+以及其他现代浏览器才支持, IE9