全屏垂直居中的又个办法 DIV+CSS
之所以说“又”,是因为已经有了一种方法:
<style>
#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}
#center{background:#FFCC33;border:1px solid #0033FF; width:300px;height:300px;position:absolute; margin:-150px;}
</style>
<div id="info">
<div id="center">t</div>
</div>
这种方法的想法是选择页面最中心的点,盒子以这一点向两边扩散。这种方法的缺点是不能自适应,必须设置高和宽。
我这儿还有一种方法:
body,html{
height:100%;
}
#wrapper{
position:absolute;
top:200px;
left:300px;
bottom:200px;
right:300px;
background:#666;
border:1px solid #333;
}
<div id="wrapper">http://www.lihaihong.com</div>
这个是可以自适应高度的,同时设置距上下左右的位置,达到居中的效果。
可惜的是这种方法在ie6下是不行的,可恶的ie6.
发表于2009-9-19 18:03