标签：
今天学到让元素在页面中水平居中的新写法，利用了CSS3的transform属性，通过设置translate的值来改变元素的位置。
页面中放一个div，width和height随便设置大小和背景色，以便查看效果：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>利用CSS3的transform属性让元素在页面居中</title> 6 <style> 7 .box{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="box"></div> 16 </body> 17 </html>
给元素绝对定位，让它距离上面50%，距离左边50%：
1 .box{ 2 width: 100px; 3 height: 100px; 4 background: red; 5 position: absolute; 6 top: 50%; 7 left: 50%; 8 }
这时候轮到transform上场了,设置一下它的转换值translate，让它距离X轴和Y轴都为-50%，完整代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>利用CSS3的transform属性让元素在页面居中</title> 6 <style> 7 .box{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 position: absolute; 12 top: 50%; 13 left: 50%; 14 transform: translate(-50%, -50%); 15 } 16 </style> 17 </head> 18 <body> 19 <div class="box"></div> 20 </body> 21 </html>
一个元素就这么简单的在页面中间显示了，无论元素大小如何，都可以，so easy~
标签：
原文地址：http://www.cnblogs.com/iseesea/p/4546647.html
