一.水平居中

1.display:inline-block;

這個(gè)方法是把容器先轉(zhuǎn)為行內(nèi)塊級(jí)，然后用text-align:center；來讓內(nèi)容相對(duì)于其父元素水平居中。

2.margin：0 auto；

這個(gè)方法是針對(duì)塊級(jí)元素的。

3.父級(jí)元素設(shè)置position：relative；子元素position：absolute；

子元素設(shè)置top：50%；height：20px；margin-top：-10px；

二.垂直居中

1.vertical-align

適用于內(nèi)聯(lián)元素（以及被轉(zhuǎn)化為內(nèi)聯(lián)元素的塊元素），或者display設(shè)置為table-cell的元素，在 firefox 和 ie8 下，可以設(shè)置塊級(jí)元素的 display 值為 table-cell，來激活 vertical-align 屬性，顯示效果和就和表格中的 valign="center" 一樣了。但 ie6,7 并不支持。

2.height加line-height

針對(duì)塊級(jí)元素內(nèi)的內(nèi)容垂直居中，設(shè)置height=line-height的高度可以達(dá)到目的。

3.等同于水平居中的第三個(gè)方法。

三.table

設(shè)置父元素的display為table，設(shè)置子元素的display為table-cell。子元素再加上vertical-align:middle;text-align:center;。