1、水平居中

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

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

　　2）確定寬度的塊級元素的水平居中

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

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

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

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

　　缺點：增加了無語義標簽，加深了標簽的嵌套層數(shù)。

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

　　優(yōu)點：不用增加無語義標簽，簡化了標簽的嵌套深度。

　　缺點：將塊級元素變成了行內(nèi)元素，會帶來一些限制。因為行內(nèi)元素比起塊級元素缺少一些功能。

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

　　優(yōu)點：保留塊級元素仍以display:block的形式顯示，而且不會添加無語義標簽，不增加嵌套深度。

　　缺點：設(shè)置了position:relative，帶來一定副作用。

　　2、垂直居中

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

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

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

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

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

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

　　問題：只有當父元素為td或者th時，該屬性才會生效，對于其他塊級元素，例如div、p等，默認情況下不支持vertical-align屬性。

　　解決辦法：

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

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

　　法一 可以直接使用表格。

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

　　缺點：添加了無語義標簽，并增加了嵌套深度

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

　　優(yōu)點：沒有增加無語義標簽

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