以下為讓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在浏覽器的正中間顯示。