实现CSS制作网页时绝对居中问题的总结

紫恋 · 发表于 2009-3-17 13:08:19

什么叫绝对居中？就是说容器到屏幕左右上下四个方向都有间距，并且随屏幕大小缩放相对不变或者等比例调整，始终居屏幕中间。绝对居中也有两种情况，容器的绝对大小和相对大小。同时有很多方法可以实现，总结起来大致如下：
　　1.利用table特性，在width and height all set 100%的时候，可以把容器嵌套在td内形成绝对居中，此时的被嵌套容器可为绝对或者相对大小。（非标准）注意不能加声明！
　　如是在标准模式下要加样式body,html{height:100%;padding:0;margin:0;}
<table width="100%" height="100%" border="0"align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:center;">
<table width="200" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#ef1122">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>　　2.利用负边距方法，绝对定位使容器相对屏幕绝对居中，此时的被嵌套容器只能为绝对大小。（标准）根据margin负值和top left的比例控制，实现随屏幕绝对居中，容器大小改变需要重新调整margin top left的参数：
<div style="background:#f00; width:740px; height:340px; left:50%; margin:-170px 0 0 -370px; position:absolute; top:50%;">
</div>　　3.老外给出的另类方法，巧妙利用display:inline-block;，IE6.0测试通过。（标准）
　　注意1.height:100%是关键：2.edge与container没有嵌套关系：
　　这应该算是IE的一个bug，个人对display:inline-block理解有限。edge可以看作一个填充，container现在是一个上下居中的对象，加了背景色能看的更清楚，当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素，在内部添加块级元素是不标准的逻辑。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><BR>
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>

<span id="edge"></span><span id="container">
<div style="width:200px; height:50px; background:#f00; line-height:50px;">仅IE6.0环境下实现</div>
</span>
</body>
</html>　　4.CSS行为expression控制实现，不过expression为IE独有，并且耗资源严重，尤其在大量使用的时候。（标准）
　　注意关键定义，不要以为height:100%在IE内是没用的：
　　实时获取屏幕高宽值，分别减去容器高宽值再除以2，得到准确坐标绝对定位：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title><style type="text/css">
</style>
</head>
<body>
<div style="background:#f00; position:absolute; left:expression((body.clientWidth-50)/2); top:expression((body.clientHeight-50)/2);width:50px;;height:50px;"></div>
</body>
</html>

潇洒人 · 发表于 2010-2-1 12:05:04

不要见一个爱一个，爱的太多，你的爱就要贬值。

		自动登录	找回密码
密码			注册