div+css 关于文字居中(二)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

现在我们要使这段文字垂直居中显示！
 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%;
 }
 

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

imoker.cn（爱摩客）提供的代码片段：

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%;
}
至此，一个完美的居中方案就产生了。

imoker.cn（爱摩客）提供的代码片段：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


html; charset=utf-8" />

现在我们要使这段文字垂直居中显示！
 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%;
 }