CSS设置DIV垂直居中的N种方法兼容IE浏览器( 二 ) _云知道

display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}
/style
/head

body
divid=wrap
divid=contentbr
prebr现在我们要使这段文字垂直居中显示！
div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}

/prebr/div

/div

/body

/html

这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

四、在Internet Explorer中的解决方案
在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。

例如，我们有下面这样一个(X)HTML代码段：
CSS Code复制内容到剪贴板
divid=wrap
divid=subwrap
divid=content
/div
/div

/div

如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中：
CSS Code复制内容到剪贴板
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}
div#content{
border:1pxsolid#000;
position:relative;
top:-50%;
}

当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）
XML/HTML Code复制内容到剪贴板
html
head
title多行文字实现垂直居中/title
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
styletype=text/css
body{font-size:12px;font-family:tahoma;}
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap{
position:absolute;
top:50%;
}
div#content{
position:relative;
top:-50%;
}
/style
/head
body
divid=wrap
divid=subwrap
divid=contentpre现在我们要使这段文字垂直居中显示！
div#wrap{
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;

}
div#subwrap{
position:absolute;
border:1pxsolid#000;
top:50%;
}

CSS设置DIV垂直居中的N种方法兼容IE浏览器( 二 )

推荐阅读

用vivo手机，这5个功能必须知道

糙米生虫了还能吃吗

佳明手表怎么设置时间

淘宝宝贝类目怎么修改

腊梅扦插方法，腊梅可以扦插繁殖吗？

驾驶过程中如何防止在高速中爆胎汽车驾驶过程当中防止在高速中爆胎的方法

料酒和黄酒有什么区别料酒和黄酒的区别简述

单相电表和三相电表的区别在哪里

结婚可以穿黑色婚纱吗婚纱颜色禁忌

三八节手抄报怎么画三八节手抄报

为什么电脑安装微信无响应

为什么公牛与公牛会斗,要怎样养公牛

渡渡鸟生活在哪个岛上

传统木桶饭的做法

南京工业学院，南京工业职业学院

火影忍者ol怎么买限时体验卡,《火影忍者OL》寒假大作战

CSS设置DIV垂直居中的N种方法 兼容IE浏览器( 二 )

推荐阅读

CSS设置DIV垂直居中的N种方法兼容IE浏览器( 二 )