console
<div id="wrap">
<div id="subwrap">
<div id="content">
现在我们要使这段文字垂直居中显示!<br />
现在我们要使这段文字垂直居中显示!
</div>
</div>
</div>
<span>
那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可以参考这篇“简单CSS
hack:区分IE6、IE7、IE8、Firefox、Opera”
</span>
body {
font-size: 12px;
font-family: tahoma;
}
div#wrap {
display: table;
border: 1px solid #FF0099;
background-color: #FFCCFF;
width: 500px;
height: 400px;
_position: relative;
overflow: hidden;
}
div#subwrap {
vertical-align: middle;
display: table-cell;
_position: absolute;
_top: 50%;
}
div#content {
_position: relative;
_top: -50%;
}
span {
font-size: 21px;
color: rgb(255, 0, 0);
}