关于css居中的个人小结

最近突然想自己整理下关于居中的一些内容,都是些很常用的。
首先把最简单万能的列出来：利用绝对定位和负边距,当然，对于没有确切宽高的元素来说，推荐使用css3的transform属性：

内部是行内元素（如span,a链接）

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

内部是块级元素 （如div）

水平居中：
text-align:center;-->没有效果
内部元素margin:0 auto;
浮动后margin:0 auto;--->没有效果
垂直居中:
line-height:外部元素高度-->有效果，但是仔细看会发现，文字是居中了，但是占据的位置还是在顶部没有居中，文字溢出了，但是不占据空间。

但是前提条件是内部元素没有使用行高，否则没有效果。

vertical-align的使用

vertical-align在上述情况下单独使用都是不会达到垂直居中的效果的，只有在外部元素是display:table-cell形式的情况下，才对内部元素有作用。

列表的居中

这里我们还讨论一种常用的居中的情况，即列表的整体居中，不知道为什么ul设置overflow:hidden;不能包裹子元素li标签，设置ul属性为inline-block行内块级元素时才可以解决问题，再把父元素设置居中，即可实现整体居中效果，内部li元素只需要设置浮动即可，不需要设置多余的样式，内部元素即可居中（如p）。示例
兼容ie7则如下

ul {
    display:inline;
    zoom:1;
}

以上整理主要是为了自己平时用到可以查阅，不需要每次都查百度，有问题欢迎指正。