CSS设置DIV垂直居中的N种方法 兼容IE浏览器
|
当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）
XML/HTML Code复制内容到剪贴板
<html> <head> <title> 多行文字实现垂直居中 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> 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="wrap"> <div id="subwrap"> <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> </div> </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> （编辑：辽源站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |