最近突然想自己整理下關(guān)于居中的一些內(nèi)容,都是些很常用的。
首先把最簡(jiǎn)單萬(wàn)能的列出來(lái)：利用絕對(duì)定位和負(fù)邊距,當(dāng)然拉鹃，對(duì)于沒(méi)有確切寬高的元素來(lái)說(shuō)，推薦使用css3的transform屬性：
內(nèi)部是行內(nèi)元素（如span,a鏈接）
水平居中：text-align:center;
垂直居中：line-height:外部元素高度
內(nèi)部是塊級(jí)元素 （如div）
水平居中：
text-align:center;-->沒(méi)有效果
內(nèi)部元素margin:0 auto;
浮動(dòng)后margin:0 auto;--->沒(méi)有效果
垂直居中:
line-height:外部元素高度-->有效果鲫忍，但是仔細(xì)看會(huì)發(fā)現(xiàn)膏燕，文字是居中了，但是占據(jù)的位置還是在頂部沒(méi)有居中饲窿，文字溢出了煌寇，但是不占據(jù)空間焕蹄。
但是前提條件是內(nèi)部元素沒(méi)有使用行高逾雄，否則沒(méi)有效果。
vertical-align的使用
vertical-align在上述情況下單獨(dú)使用都是不會(huì)達(dá)到垂直居中的效果的腻脏，只有在外部元素是display:table-cell形式的情況下鸦泳，才對(duì)內(nèi)部元素有作用。
列表的居中
這里我們還討論一種常用的居中的情況永品，即列表的整體居中做鹰，不知道為什么ul設(shè)置overflow:hidden;不能包裹子元素li標(biāo)簽，設(shè)置ul屬性為inline-block行內(nèi)塊級(jí)元素時(shí)才可以解決問(wèn)題鼎姐，再把父元素設(shè)置居中钾麸，即可實(shí)現(xiàn)整體居中效果，內(nèi)部li元素只需要設(shè)置浮動(dòng)即可炕桨，不需要設(shè)置多余的樣式饭尝，內(nèi)部元素即可居中（如p）。示例
兼容ie7則如下
ul {
display:inline;
zoom:1;
}
以上整理主要是為了自己平時(shí)用到可以查閱献宫，不需要每次都查百度钥平，有問(wèn)題歡迎指正。
