一.層的橫向居中

<style>
#div1{width:600px; height:600px;}
#div2{width:400px; height:200px;}
</style>
<div id=”div1″>
<div id=”div_2″> div2 </div>
</div>

要讓div2在div1中橫向居中，解決辦法如下：
1.IE中，設置div1的樣式：text-align:center; 該方法在IE8以上版本和firefox中僅適用于行內元素居中（display:inline; 和 display:inline-block; 及類似效果的元素以及文本，如 input img 等 ），子元素中的 div、table 等 具有類似 display:block 效果元素將繼承這個樣式使文本居中 ,但是容器元素本身并不會居中。
2.IE7 以 上和 firefox 中，設置div2樣式：margin: auto; 僅對具有類似 display:block 效果的元素生效，對 display 為 inline、inline-block 的元素不生效，一般用于 div、table 等位置定位的容器元素， margin 樣 式 auto 效果是橫向居中，并置頂。
3. div2 不能是 position:absolute; 絕對定位將使瀏覽器無法對元素自動排版，需依賴 left、right 屬性，除非明確設定 left:0,right:0;
綜合以上：

#div1{
*text-align:center; /* ie */
}
#div2{
margin:auto;
display:block;
*display:inline; /* ie */
*zoom:1; /* ie */
}

二.層的垂直居中
1.最常見的就是表格元素的 vertical-align:middle; 和 css中的 vertical-align:middle;
css 中的 vertical-align:middle;與表格的 vertical-align 不太一樣， 該樣式作用于 inline-block(或具有類似行內塊狀效果) 的元素與其父元素內的文本或祖先元素內的文本（如果該祖先元素內的inline-block 元素沒有設置 vertical- align 樣式）在垂直方向的對齊方式。
vertical-align 無法影響后代元素的內容的對齊方式。
vertical-align 對 block 元素不起作用，因為折行了在垂直方向沒有對齊可言。
vertical-align 作用于 inline元素(如 span)時，將決定該元素自身如何對齊于同一行內的 inline-block 元素，無法影響同輩元素或文本的對齊方式。
vertical-align 取 值為 text-top text-bottom 時， 對齊方式涉及文本的 inline-box 模型，
inline-box 模型的高度 由 line-height(可以是繼承來的) 決定，分為 content-area、top、bottom幾個部分，其中的 content- area 是由文字大小決定，如果過 line-height 很大， font-size 較小，加上背景顏色，我們就看到的背景色區域就 是 content-area，
text-top 和 text-bottom 并不是可見的文字的頂端和底端（IE6-8 在渲染 text- top 和text-bottom時， 錯誤地將content-area 的頂端和底端作為對齊的基準）。
具體的解釋參考這里：
http://www.survivalescaperooms.com/css/70053.html
一個例子，firefo、chrome 與IE 有差別：

<div style=”line-height:200px; border:1px solid #34538b;”>