QQ 1640076782
由于在IE6及以下的版本中，高度的计算上存在着缺陷。所以IE6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的度，而从父元素继承来的定位高度）。例如，下面这样一个(X)HTML代码段：
<div id=”wrap”>
<div id=”subwrap”>
<div id=”content”>
</div>
</div>
</div>
如果对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，使用的100%分比将不再是content原有的高度。例如，设定了subwrap的position为40%，如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果设定subwrap的top:50%的话，就必须使用100%才能使content回到原来的位置上去，但是如果把content也设置50%呢？那么它就正好垂直居中了。所以可以使用这种方法来实现IE6中的垂直居中了。
以下给出一个完整的例子：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http ://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>文字垂直居中</title>
</head>
<style type=”text/css”>
body { font-size:12px;font-family:tahoma;}
#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
#content {
_position:relative;
_top:-50%;
}
</style>
<body>
<div id=”wrap”>
<div id=”subwrap”>
<div id=”content”>
<pre>
ONEPOUND（万方）外贸建站专家！
ONEPOUND（万方）外贸建站专家！
ONEPOUND（万方）外贸建站专家！
ONEPOUND（万方）外贸建站专家！
</pre>
</div>
</div>
</div>
</body>
</html>
温馨提示：调试该段代码时如果出现错误，只要改一下双引号为英文双引号即可！
xueposter@gmail.com