最近突然想自己整理下關(guān)于居中的一些內(nèi)容,都是些很常用的。
首先把最簡單萬能的列出來：利用絕對定位和負(fù)邊距,當(dāng)然，對于沒有確切寬高的元素來說，推薦使用css3的transform屬性：

內(nèi)部是行內(nèi)元素（如span,a鏈接）

水平居中：text-align:center;
垂直居中：line-height:外部元素高度

內(nèi)部是塊級元素 （如div）

水平居中：
text-align:center;-->沒有效果
內(nèi)部元素margin:0 auto;
浮動后margin:0 auto;--->沒有效果
垂直居中:
line-height:外部元素高度-->有效果，但是仔細(xì)看會發(fā)現(xiàn)，文字是居中了，但是占據(jù)的位置還是在頂部沒有居中，文字溢出了，但是不占據(jù)空間。

但是前提條件是內(nèi)部元素沒有使用行高，否則沒有效果。

vertical-align的使用

vertical-align在上述情況下單獨(dú)使用都是不會達(dá)到垂直居中的效果的，只有在外部元素是display:table-cell形式的情況下，才對內(nèi)部元素有作用。

列表的居中

這里我們還討論一種常用的居中的情況，即列表的整體居中，不知道為什么ul設(shè)置overflow:hidden;不能包裹子元素li標(biāo)簽，設(shè)置ul屬性為inline-block行內(nèi)塊級元素時才可以解決問題，再把父元素設(shè)置居中，即可實(shí)現(xiàn)整體居中效果，內(nèi)部li元素只需要設(shè)置浮動即可，不需要設(shè)置多余的樣式，內(nèi)部元素即可居中（如p）。示例
兼容ie7則如下

ul {
    display:inline;
    zoom:1;
}

以上整理主要是為了自己平時用到可以查閱，不需要每次都查百度，有問題歡迎指正。