css3让绝对定位元素⽔平居中的⽅法
⼀、绝对定位元素的居中实现
如果要问如何CSS实现绝对定位元素的居中效果，很多⼈⼼⾥已经有答案了。
兼容性不错的主流⽤法是：
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px;    /* ⾼度的⼀半 */
margin-left: -300px;    /* 宽度的⼀半 */
}
但，这种⽅法有⼀个很明显的不⾜，就是需要提前知道元素的尺⼨。否则margin负值的调整⽆法精确。此时，往往要借助JS获得。
CSS3的兴起，使得有了更好的解决⽅法，就是使⽤transform代替margin. transform中translate偏移的百分⽐值是相对于⾃⾝⼤⼩的，于是，我们可以：
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);    /* 50%为⾃⾝尺⼨的⼀半 */
}
于是乎，⽆论绝对定位元素的尺⼨是多少，其都是⽔平垂直居中显⽰的。
然，问题很明显，兼容性不好。IE10+以及其他现代浏览器才⽀持, IE9(-ms-), IE10+以及其他现代浏览器才⽀持。中国盛⾏的IE8浏览器被忽略是有些不适宜的（⼿机web开发可忽略）。
实际上，绝对定位元素的居中实现还有另外⼀种⽅法，可以说是权衡了上⾯的尺⼨⾃适应以及兼容性的⼀个⽅案，其实现的核⼼
是margin:auto.
在开发中我们在处理transform的时候最好再添加⼀个-webkit-transform:translate(-50%, -50%); 因为X5内核的webkit版本⽐较低，所以需要兼容处理
css固定定位⼆、margin:auto实现绝对定位元素的居中
⾸先，我们来看下CSS代码：
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto;    /* 有了这个就⾃动居中了 */
}
代码两个关键点：
1. 上下左右均0位置定位；
2. margin: auto
于是，就居中了。上⾯代码的width: 600px height: 400px仅是⽰意，你修改为其他尺⼨，或者不设置尺⼨（需要是图⽚这种⾃⾝包含尺⼨的元素），都是居中显⽰的。很有意思的~~
您可以狠狠地点击这⾥：
点击demo页⾯中间的按钮，让原本static的框框absolute化，可以发现其是⽔平垂直居中的。
不知诸位新技能get否？
对了，该⽅法IE8+以及其他浏览器都是OK的。
上图为8~10⽉份，百度流量统计员给出的浏览器访问数据。IE6+IE7⼤概14%的样⼦。显然，很快，此⽅法就要开始称霸PC武林了！本⽂地址转载来⾃：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。