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

发布时间：2020-03-17 09:47 所属栏目：52 来源：站长网

导读：当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原

当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

XML/HTML Code复制内容到剪贴板

<html>

<head>

　　<title> 多行文字实现垂直居中 </title>

　　　　body { font-size:12px;font-family:tahoma;}

　　　　div#wrap {

　　　　　　border:1px solid #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>

　　　　　　<div id="content"><pre>现在我们要使这段文字垂直居中显示！

　　　　　　　　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%;

　　　　　　　　}<br>　　　　　　　　</pre>

　　　　　　</div>

</body>

</html>　

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。

CSS Code复制内容到剪贴板

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%;

}

至此，一个完美的居中方案就产生了。

XML/HTML Code复制内容到剪贴板

<html>

<head>

　　　<title> 多行文字实现垂直居中 </title>

（编辑：ASP站长网）

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

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