1、水平居中

　　1）文本、圖片等行內(nèi)元素的水平居中

　　給父元素設(shè)置text-align:center；

　　2）確定寬度的塊級(jí)元素的水平居中

　　設(shè)置margin-left:auto和margin-right:auto；

　　3）不確定寬度的塊級(jí)元素的水平居中（3種方法）

　　法一 將要居中的元素包含在table標(biāo)簽內(nèi)，對(duì)table設(shè)置margin-left:auto和margin-right:auto。

　　說(shuō)明：table標(biāo)簽本身并不是塊級(jí)元素，如果不給它設(shè)定寬度的話，它的寬度由內(nèi)部元素的寬度“撐起”。

　　缺點(diǎn)：增加了無(wú)語(yǔ)義標(biāo)簽，加深了標(biāo)簽的嵌套層數(shù)。

　　法二 改變塊級(jí)元素的display為inline，然后使用text-align:center來(lái)實(shí)現(xiàn)居中

　　優(yōu)點(diǎn)：不用增加無(wú)語(yǔ)義標(biāo)簽，簡(jiǎn)化了標(biāo)簽的嵌套深度。

　　缺點(diǎn)：將塊級(jí)元素變成了行內(nèi)元素，會(huì)帶來(lái)一些限制。因?yàn)樾袃?nèi)元素比起塊級(jí)元素缺少一些功能。

　　法三 給父元素設(shè)置float，然后父元素設(shè)置position:relative和left:50%，子元素設(shè)置position:relative和left:-50%來(lái)實(shí)現(xiàn)水平居中。

　　優(yōu)點(diǎn)：保留塊級(jí)元素仍以display:block的形式顯示，而且不會(huì)添加無(wú)語(yǔ)義標(biāo)簽，不增加嵌套深度。

　　缺點(diǎn)：設(shè)置了position:relative，帶來(lái)一定副作用。

　　2、垂直居中

　　1）父元素高度不確定的文本、圖片、塊級(jí)元素的垂直居中

　　給父元素設(shè)置相同的上下邊距。

　　2）父元素高度確定的單行文本的垂直居中

　　通過(guò)給父元素設(shè)置line-height來(lái)實(shí)現(xiàn)，其中l(wèi)ine-height值和父元素的height值相同。

　　3）父元素高度確定的多行文本、圖片、塊級(jí)元素的垂直居中

　　設(shè)置vertical-align:middle;

　　問(wèn)題：只有當(dāng)父元素為td或者th時(shí)，該屬性才會(huì)生效，對(duì)于其他塊級(jí)元素，例如div、p等，默認(rèn)情況下不支持vertical-align屬性。

　　解決辦法：

　　在FireFox和IE8下，可以設(shè)置塊級(jí)元素的display:table-cell，來(lái)激活vertical-align屬性。

　　對(duì)于不支持display:table-cell的IE6和IE7，有兩種方法。

　　法一 可以直接使用表格。

　　優(yōu)點(diǎn)：很好的實(shí)現(xiàn)垂直居中效果，且不會(huì)帶來(lái)任何樣式上的副作用。

　　缺點(diǎn)：添加了無(wú)語(yǔ)義標(biāo)簽，并增加了嵌套深度

　　法二 使用特定格式的hack。父元素設(shè)置position:absolute;top:50%，子元素設(shè)置position:relative;top:-50%。

　　優(yōu)點(diǎn)：沒(méi)有增加無(wú)語(yǔ)義標(biāo)簽

　　缺點(diǎn)：使用了hack, 需要設(shè)置position:relative和position:absolute，帶來(lái)了副作用。