Div 在頁面中居中

 以下為讓div顯示在浏覽器正中間的樣式

<style type="text/css"> 
#centerdiv { 
position:absolute; <!--這個屬性是設置div以絕對位置顯示-->
top:50%;           <!--在離頂部50%的位置顯示-->
left:50%;          <!--在離左邊50%的位置顯示-->
margin:-150px 0 0 -100px;    <!--這個設置大家開始一看，可能覺得好像不是很明白，在下面為大家詳細講解--> 
width:300px; 
height:200px;
background:black; 
}  
</style> 

相信大家最不明白就是在margin:-150px 0 0 -100這個屬性上面，在不設置這個屬性的時候,這個div的x坐標為內容顯示部分的50%，y坐標為內容顯示部分的50%，顯示出來的然而這樣的話只能說這個div的起點是在正中間，我們需要的是將整個div顯示在正中間,所以給margin-left:-150px;(這裡的150是從width屬性中得來的它是等於width的一半,對應的margin-top也是通過通樣的方法得來的。)這樣就會把整個div的寬度分一半到左邊就可以讓其水平居中了，在設置margin-top:-100px;是同樣的道理，會將整個div的高度分一半到上面顯示。就形成了整個div在浏覽器的正中間顯示。