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>
【 微信掃一掃 】
