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

superadmin · 发表于 2007-10-8 10:31:29

什么叫绝对居中？就是说容器到屏幕左右上下四个方向都有间距，并且随屏幕大小缩放相对不变或者等比例调整，始终居屏幕中间。绝对居中也有两种情况，容器的绝对大小和相对大小。同时有很多方法可以实现，总结起来大致如下：

　　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独有，并且耗资源严重，尤其在大量使用的时候。（标准）

superadmin · 发表于 2007-10-8 10:31:42

注意关键定义，不要以为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>

　　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;}
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */
div.greenBorder {border: 1px solid green; background-color: #FFF;}
p{margin: 1em;}
</style>
<script type="text/javascript">
// <![CDATA[

function toggleContent(name,n) {
var i,t='',el = document.getElementById(name);
if (!el.origCont) el.origCont = el.innerHTML;

for (i=0;i<n;i++) t += el.origCont;
el.innerHTML = t;
}
// ]]>
</script>
</head>
<body>
<div id="outer">
  <div id="middle">
<div id="inner" class="greenBorder">
   <p><a href="javascript:toggleContent('inner',1)">默认长度</a>  <a href="javascript:toggleContent('inner',2)">加长页面</a></p>
   <p> 1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 <br />
      2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 <br />
      3.菜单：Effect > Stylize > Drop Shadow，设置如下图。 <br />
      1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 <br />
      2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 <br />
      3.菜单：Effect > Stylize > Drop Shadow，设置如下图。</p>
   <address style="text-align:center; padding: .5em; clear: left;">
   Design by <a href="//www.webjx.com">Webjx</a> 本演示采用<a href="//www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途。
   </address>
</div>
  </div>
</div>
<script src="//www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<noscript><p>google-analytics</p></noscript>
<script src="//www.webjx.com/*/*.js" type="text/javascript"></script>
<noscript><p>stat.</p></noscript>
</body>
</html>

8.利用expression(仅对IE)

<div style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div>

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

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

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

相关帖子