就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个元素：
div#wrap { height:400px; display:table; } div#content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; }
多行文字实现垂直居中body { font-size:12px;font-family:tahoma;}div#wrap {height:400px;display:table;}div#content {vertical-align:middle;display:table-cell;border:1px solid #FF0099;background-color:#FFCCFF;width:760px;}现在我们要使这段文字垂直居中显示！ div#wrap {height:400px;display:table;}div#content {vertical-align:middle;display:table-cell;border:1px solid #FF0099;background-color:#FFCCFF;width:760px;}
这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。
D、在Internet Explorer中的解决方案
在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。
例如，我们有下面这样一个(X)HTML代码段：
如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中：
div#wrap { border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; position:relative; } div#subwrap { position:absolute; border:1px solid #000; top:50%; } div#content { border:1px solid #000; position:relative; top:-50%; }
当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）
多行文字实现垂直居中body { font-size:12px;font-family:tahoma;}div#wrap {border:1px solid #FF0099;background-color:#FFCCFF;width:760px;height:400px;position:relative;}div#subwrap {position:absolute;top:50%;}div#content {position:relative;top:-50%;}现在我们要使这段文字垂直居中显示！div#wrap {border:1px solid #FF0099;background-color:#FFCCFF;width:760px;height:500px;position:relative;}div#subwrap {position:absolute;border:1px solid #000;top:50%;}div#content {border:1px solid #000;position:relative;top:-50%;}
E、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。
div#wrap { display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden; } div#subwrap { vertical-align:middle; display:table-cell; _position:absolute; _top:50%; } div#content { _position:relative; _top:-50%; }
至此，一个完美的居中方案就产生了。
多行文字实现垂直居中body { font-size:12px;font-family:tahoma;}div#wrap {display:table;border:1px solid #FF0099;background-color:#FFCCFF;width:760px;height:400px;_position:relative;overflow:hidden;}div#subwrap {vertical-align:middle;display:table-cell;_position:absolute;_top:50%;}div#content { _position:relative;_top:-50%;}现在我们要使这段文字垂直居中显示！div#wrap {border:1px solid #FF0099;background-color:#FFCCFF;width:760px;height:500px;position:relative;}div#subwrap {position:absolute;border:1px solid #000;top:50%;}div#content {border:1px solid #000;position:relative;top:-50%;}
PS:垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。
F、实测可以完美实现各种浏览器兼容的居中方案
下面这段代码经过实测，可以完美兼容IE7以上的IE浏览器，其它标准浏览器如火狐、谷歌等也没有问题。
说明：尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
水平垂直居中body {padding: 0; margin: 0;}body,html{height: 100%;}#outer {height: 100%; overflow: hidden; position: relative;width: 100%;}#outer[id] {display: table; position: static;}#middle {position: absolute; top: 50%;} /* for explorer only*/#middle[id] {display: table-cell; vertical-align: middle; position: static;}#inner {position: relative; top: -50%;margin: 0 auto;} /* for explorer only */div.greenBorder {width:500px;height:584px;background:#333;}*+html #outer[id]{position: relative;}*+html #middle[id]{position: absolute; }以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。
CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。
测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。上面的代码不支持IE7，还需要在最下面加二句：
*+html #outer[id]{position: relative;}*+html #middle[id]{position: absolute; }
本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。
