css 垂直居中方法整理

知道vertical-align属性吧， css中用来设置垂直居中的。但它只针对有vertical特性的元素，像<td><th><caption> ；而<div><span>这些要用垂直居中的时候只能另外找方法了。

整理一下各种情况下的垂直居中：

一、单行在确定的容器中垂直居中

如果一个已知高度的容器只有一行字，只需要设置它的实际高度height和所在行的高度line-height相等即可，参考如下：

div {  

  height:25px;  /* 容器高度 */

  line-height:25px;  /* 行高 */

  overflow:hidden;  /* 防止超出长度或自动换行 */

}

二、多行文本在不确定容器中垂直居中

如果一大段文本（未知高度）想在容器中居中，可以用设定padding的方法，将上下的padding值相同即可。前提是该容器高度可伸缩，参考如下：

div {  

  padding:25px;  

} 

三、多行文本在确定容器中垂直居中

一大段文本（未知高度）要在已知高度的容器中垂直居中，     这个是相对麻烦的一个了。 要用到vertical-align属性，但它只对特定标签有作用。所以把<div>(假设容器为div)模拟成<table> ，所幸display属性提供这个值display:table 和 display:table-cell。前者设置在父元素上，后者设置在子元素上。

div#wrap {  

  height:400px;  

  display:table;  

}  

div#content {  

  vertical-align:middle;   /* 别忘了这句 */

  display:table-cell;   

  width:760px;  

}

另外，这种方法在IE6.0版本以下是无效的。当然，IE6以下基本已不需要考虑...