实现CSS制作网页时绝对居中问题的总结
2008-02-23 08:40:54来源：互联网 阅读 ()
什么叫绝对居中？就是说容器到屏幕左右上下四个方向都有间距，并且随屏幕大小缩放相对不变或者等比例调整，始终居屏幕中间。 绝对居中也有两种情况，容器的绝对大小和相对大小。 同时有很多方法可以实现，总结起来大致如下：
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">
<!--body { margin:0; height:100%;}
#edge { width:0; height:100%; display:inline-block; vertical-align:middle;}#container { text-align:center; width:100%; display:inline-block; vertical-align:middle;}-->
</style>
</head>
<body>
<!-- required for xhtml1.1 validation only -->
<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">
<!--html,body { height:100%;}--></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>
5.FF1.5测试通过，绝对定位，边距为比例，此时容器高宽始终为viewport的50%相对大小（标准）：
<div style="position:absolute; top:0; right:0; bottom:0; left:0; width:50%; height:50%; margin:auto; background:#f00; color:white; line-height:20px; text-align:center;">FF1.5测试通过</div>
6.FF1.5测试通过，绝对定位，直接定位上下左右，强制边局实现容器相对大小（标准）：
代码：略
7.ff1.5 IE5 IE6通过测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical centering in valid CSS</title>
<style type="text/css">
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;}
body,html{height: 100%; }
a{color: #333;}
a:hover{color: green;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }
#outer[id] {display: table; position: static;}
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
