我們習慣用margin:0,auto;居中元素，但有時我們必須要讓元素獲得position:absolute;，這時候，再用margin:0,auto;居中是無效的。
舉個例子
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <title>wheel</title> 8 9 <style type="text/css" > 10 11 #sample{ 12 13 width: 900px; 14 15 height: 600px; 16 17 position: absolute; 18 19 margin: 0,auto; 20 21 background: #A5A5A5; 22 23 } 24 25 </style> 26 27 </head> 28 29 <body id="body"> 30 31 <div id="sample"> 32 33 </div> 34 35 </body> 36 37 </html>
在這里，雖然css有margin: 0,auto;，顯示效果如下圖所示，沒有居中
我們需要把代碼改為
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <title>wheel</title> 8 9 <style type="text/css" > 10 11 #sample{ 12 13 width: 900px; 14 15 height: 600px; 16 17 position: absolute; 18 19 left: 50%; 20 21 margin-left: -450px; 22 23 background: #A5A5A5; 24 25 } 26 27 </style> 28 29 </head> 30 31 <body id="body"> 32 33 <div id="sample"> 34 35 </div> 36 37 </body> 38 39 </html>
在這里我們做了兩個改動，就是加了
left: 50%;
margin-left: -450px;
為什么這么改呢，left是在position屬性是absolute或fixed時才有效的， left: 50%;意思距離左邊是界面的百分之五十，這是div的左邊邊界正好在畫面的中間線，這是我們再左移圖片的一半長度的距離，就可移使圖片中間與畫面中間重疊
而且在縮放時，仍保持居中。
