关于网页中不同元素对齐的方法总结（2）

上一篇中，已经对常规的垂直居中对齐有一个说明了，但是我们也知道了，在IE6 下面那些方法似乎都不起作用，于是我们不得不思考其它的解决方案。

其实在IE6及以下版本中，在高度的计算上存在着缺陷的。这关系到一个CSS样式的继承问题。在IE 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个HTML代码段：

<div id="div1">  

<div id="div2">  

    <div id="div3">  

    </div>  

</div>  

</div>

如果我们对div2进行了绝对定位，那么div3也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对div3进行相对定位的时候，你使用的100%分比将不再是div3原有的高度。例如，我们设定了div2的position为40%，我们如果想使div3的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定div2的top:50%的话，我们必须使用100%才能使div3回到原来的位置上去，但是如果我们把div3也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现IE 6中的垂直居中：

div#div1 {  

border:1px solid #FF0099;  

background-color:#FFCCFF;  

width:760px;  

height:400px;  

position:relative;  

}  

div#div2 {  

position:absolute;  

border:1px solid #000;  

top:50%;  

}  

div#div3 {  

border:1px solid #000;  

position:relative;  

top:-50%;  

}

当然，这段代码只能在IE 6等计算存在问题的浏览器中才会有作用。

但是这些情况都只是在IE6下面才会出现，其它的浏览器并不存在这个问题，所以我们需要考虑不同浏览器的问题，下面有一个解决方案 不过这要用到CSS hack的知识。

div#div1 {  

display:table;  

border:1px solid #FF0099;  

background-color:#FFCCFF;  

width:760px;  

height:400px;  

_position:relative;  

overflow:hidden;  

}  

div#div2 {  

vertical-align:middle;  

display:table-cell;  

_position:absolute;  

_top:50%;  

}  

div#div3 {  

_position:relative;  

_top:-50%;  

}

至此，不同浏览器的内容垂直居中对齐的方案也就产生了，可以看到只是在ie6下面才会有这样恶心的问题，所以还是希望IE6早点消失在我们的是常使用中吧！