css 中 div垂直居中的方法

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS

Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生

效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起

作用。

单行垂直居中

如果一个容器只有一行文字，那比较简单，设置的方法就是 所在行的高度line-height和实际高度height的值相等即可

例如：

<div class="div1">单行文本的垂直居中，只需设定height和line-height的值一样即可</div>

对应设置的css为：

.div1 {
border: 1px red solid;
height: 25px;
line-height: 25px;
overflow: hidden;
}

多行未知高度文字的垂直居中

这种情况可以通过padding的值相同来实现文字垂直居中的效果

例如：

<div class="div2">多行未知高度的文字垂直居中，只需要设定padding值相同即可</div>

对应的css：

.div2 {
padding: 25px;
border: 1px blue solid;
width: 300px;
}

多行文本固定高度垂直居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display

属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和

display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

例如：

<div class="div3">
<div class="content">多行文字实现垂直居中，可以模拟table中的vertical-align属性，需要注意display:table和display:table-cell的使用方法
，display:table用于设置在父元素上，display:table-cell，必须设置在子元素上
</div>
</div>

对应的css为：

.div3 {
display: table;
height: 100px;
}
.content {
display: table-cell;
vertical-align: middle;
border: 1px solid green;
width: 400px;
}

这种方式在IE6下不起作用，Internet Explorer 6 并不能正确地理解display:table和display:table-cell，所以在IE6下可以通过绝对定位来实现，但是IE6一般不再考虑的范围内。