div水平居中很容易，設置css樣式 text-align: center; 就可以了。
垂直居中也有個屬性 vertical-align: middle; 這個屬性普通設置是沒有效果的。
第一種方法：通過一個空白圖片可以達到垂直居中的效果。
<html> <style> #image{ width:500px; height:500px; background:#fff000; text-align: center; overflow: hidden; } #image img { vertical-align: middle; } #block { width: 0px; height: 100%; } </style> <body> <div id="image"> <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/> <img src="" id="block"/> </div> </body> </html>
個人覺得vertical-align: middle 是相對於左邊的高度垂直居中的，我給左邊一個填滿div的圖片，就可以實現垂直居中了。
第二種方法：往div里面加表格。
<html> <style> #a { background: #fff000; width: 500px; height: 500px; overflow: hidden; text-align: center; } </style> <body> <div id="a"> <table width="100%" height="100%"> <tr> <td align="center"> <img src="http://static.cnblogs.com/images/logo_small.gif" /> </td> </tr> </table> </div> </body> </html>
在表格里就很容易設置居中了。
經測試，這兩種做法都沒有瀏覽器不兼容的問題。推薦用第一種方法。
另外，說一下overflow: hidden; 這個屬性，當圖片大小超出div的大小時，會影藏超出的部分。不設置的話，圖片會全部顯示，覆蓋在div上。