純CSS定位的固定垂直置中浮動層代碼，附經典解說：《詳解定位與定位應用》

該文章由本人原創，如若轉載，請說明出處：http://blog.csdn.net/xxd851116/archive/2009/06/29/4308161.aspx

關於在html中浮動層是眾多網頁愛好者剛開始的痛點，主要在於定位。如果你對CSS定位還不夠瞭解，請先閱讀此處:http://andymao.com/andy/post/70.html後再看本文章。

 

【需求】：

將一個網頁分成頭、身和腳三部分。如下：

 ———————————————————— 

                            頭

 ———————————————————— 

                            身

 ———————————————————— 

                            腳

 ———————————————————— 

要求：1、頭腳等高，並且頭位於瀏覽器頂部，腳位於瀏覽器底部，身高可變化；

         2、在身的左右分別放置兩個垂直置中的div，類似浮動廣告條，位置固定，不隨捲軸的滾動和滾動；

 

【問題】：

1、如何固定層？

/* 全域浮動層固定預設樣式設定，支援FF和IE */<br />.fixed {position:fixed;}<br />* html div.fixed {position:absolute; right:16px;} /* [only for ie] "right=16px"是為了顯示捲軸,即right最小值為16px */

更詳細請點擊這裡：http://andymao.com/andy/post/70.html（我認為講的比較詳細，和大家一起分享）；

以下摘抄一部分文字如下：

由於廣告的濫用，使得一些瀏覽器軟體都開始有了廣告內容攔截，使得一些很好的效果現在都不推薦使用了。比如讓一個元素可能隨著網頁的滾動而不斷改變自己在瀏覽器的位置。而現在我可以通過CSS中的一個定位屬性來實現這樣的一個效果，這個元素屬性就是曾經不被支援的position:fixed; 他的含義就是：固定定位。這個固定與絕對位置很像，唯一不同的是絕對位置是被固定在網頁中的某一個位置，而固定定位則是固定在瀏覽器的視框位置。
雖然原來的瀏覽器並不支援過個屬性，但是瀏覽器的發展使得現在的進階瀏覽器都可以正確的解析這個CSS屬性。並且通過CSS HACK來讓IE6都可以實現這樣的效果（目前無法使IE5.x）實現這種效果。
2、如何垂直置中？

這個問題其實就是DIV絕對位置是置中問題。其實so easy！以下是我的思路：只要將該固定定位的div的top設為50%，然後將上移到該層的高度的一半就行了(margin-top為負)，例如，如果某div高度為200px，要使得該div垂直置中，只要設定"position:absolute;top:50%;margin-top:-100px"，就是這麼簡單！

因此，水平置中也解決了，如果該層寬度為300px，那麼"position:absolute;left:50%;margin-left:-100px"代碼可以解決水平置中問題。

即水平又垂直，那就將兩者結合起來嘍！嘿嘿。。。

 

【測試源碼下載】：點擊下載完整測試代碼（該用例代碼為本人業餘之作，如有不足，請指正。詳細問題源碼均有說明）