一.層的橫向居中

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

要讓div2在div1中橫向居中，解決辦法如下：
1.IE中，設置div1的樣式：text-align:center;該方法在IE8以上版本和firefox中僅適用于行內元素居中（display:inline;和display:inline-block;及類似效果的元素以及文本，如inputimg等），子元素中的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-toptext-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有差別：

<divstyle=”line-height:200px;border:1pxsolid#34538b;”>
<spanstyle=”font-size:60px;border:1pxsolid#a0b3d6;vertical-align:text-top;”>大大的文字</span>后面是靜止的文字。