有時候我們想要做個簡單的首頁(有人稱前導頁、形象頁...等)，或是購物車平台要做圖片展示，會運用到水平+垂直置中的技巧。以前都是直接用text-align:center以及vertical-align:middle兩行解決。
但使用這個語法，有時成功、有時又會失效，在不太清楚原因的情況下，我改用了其他方法實現我想要的區塊水平垂直置中，在這邊也整理出來分享給大家，希望對你們有所幫助:)
首先先看範例：
首頁、前導頁、形象頁，區塊水平垂直置中
這是我部落格現在的首頁，有興趣研究的朋友，可以直接到我的首頁網站觀看。但其實眼尖的朋友會發現我的垂直區塊並沒有完全置中，因為這部分是可以作微調的，以下會做說明。
我使用的css語法設定如下：#div {
width:450px;/*必須要設定你整個DIV區塊的寬度*/
position:absolute;
margin:-100px 0px 0px -200px;/*調整水平垂直置中*/
top: 50%;
left: 50%;
overflow: auto;
}
如果你想來點特別的，不想要那麼剛好在正中央，可以對margin:-100px 0px 0px -200px;進行微調。像我的首頁是寫成margin:-200px 0px 0px -200px;，所以才沒有剛好在垂直中線上。
參考資料
該語法來源自mycelly.com的Nice and Free CSS Templates，他網站還有更多各式各樣的佈局參考，包含二欄、三欄，甚至是特殊欄位的樣板。找到你想要的樣板點下去就可以看到他的css+xhtml原始碼囉。
購物車圖片水平垂直置中
如果是想要讓每張圖片都水平垂直置中，像是購物車，或是相簿的圖片展示，可以參考以下css語法：
css語法設定#img {
float:left;
/*以下是寬&高不是圖片的寬&高，而是包覆圖片的DIV的寬&高*/
width:240px;
height:155px;
border:1px solid #d0d0d0;
text-align:center;
/*line-height設定是重點，建議可以設成跟height一樣*/
line-height:155px;
/* IE */
/* 專為IE7調整，140px=155px*0.8 */
*font-size : 140px;
*font-family : Arial;
}應用在xhtml裡頭可以寫成：<div id="img"><img src="圖片位置" border="0" /></div>
參考資料
該語法來源自Vexed's Blog，這設定方法應該是原作者自己想出來的，裡頭也有詳細解釋到為什麼IE要*0.8做設定，還有更多細部的修正&微調。
大家可以發現原作者提供的語法較長，我的短很多。雖然短，我提供的語法卻同樣適用於Firefox、Google Chrome、Opera、Safari、IE6、IE7、IE8...等瀏覽器，那是因為我的xhtml有做DOCTYPE的Strict宣告，如果你們不希望語法那麼長，也可以考慮做個DOCTYPE宣告喔。
至於如果宣告DOCTYPE呢？只要在你的html檔案最上方加入這段語法就可以了!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
FACEBOOKs COMMENT(
EVERYBODYs COMMENT: