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在瀏覽器的正中間顯示。