1.css实现居中
缺点：需要提前知道元素的宽度和高度。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .box{ 8 width: 600px; 9 height: 400px; 10 position: absolute; 11 left: 50%; top: 50%; 12 border:1px solid #000; 13 background:red; 14 margin-top: -200px; /* 高度的一半 */ 15 margin-left: -300px; /* 宽度的一半 */ 16 } 17 </style> 18 </head> 19 <body> 20 21 <div class="box"> 22 23 </div> 24 25 </body> 26 </html>
2、css3实现水平垂直居中
注意：无论元素的尺寸是多少，都可以居中。不过IE8以上才兼容这种写法，移动端可忽略。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .box{ 8 width: 600px; 9 height: 400px; 10 position: absolute; 11 left: 50%; 12 top: 50%; 13 border:1px solid #000; 14 background:red; 15 transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */ 16 } 17 </style> 18 </head> 19 <body> 20 <div class="box"> 21 </div> 22 </body> 23 </html>
3、margin：auto实现居中
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .box{ 8 width: 600px; 9 height: 400px; 10 position: absolute; 11 left: 0; 12 top: 0; 13 right: 0; 14 bottom: 0; 15 border:1px solid #000; 16 background:red; 17 margin: auto; /* 有了这个就自动居中了 */ 18 } 19 </style> 20 </head> 21 <body> 22 <div class="box"> 23 </div> 24 </body> 25 </html>
（转载：http://www.qdfuns.com/notes/21738/93c9220f8fa40767833b80439291b1bd.html）