关于绝对居中问题

2022-07-15 80酷酷网 80kuku.com

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

　　1.利用table特性，在width and height all set 100%的时候，可以把容器嵌套在td内形成绝对居中，此时的被嵌套容器可为绝对或者相对大小。（非标准）注意不能加声明！

HTML代码<table width="100%" height="100%" border="0"align="center" cellpadding="0" cellspacing="0"><tr><td 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的参数：

HTML代码<div 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只是一个内联元素，在内部添加块级元素是不标准的逻辑。

HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN" "<ahref="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 height:50px; background:#f00;line-height:50px;">仅IE6.0环境下实现</div></span></body></html>

　　4.行为expression控制实现，不过expression为IE独有，并且耗资源严重，尤其在大量使用的时候。（标准）
注意关键定义，不要以为height:100%在IE内是没用的：
实时获取屏幕高宽值，分别减去容器高宽值再除以2，得到准确坐标绝对定位：

HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 1.0 Transitional//EN" "<ahref="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><metahttp-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"></style></head><body><div 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%相对大小（标准）：
HTML代码<div 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通过测试

HTML代码<!DOCTYPEhtml PUBLIC "-//W3C//DTD 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 </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;} /* forexplorer only*/#middle[id] {display: table-cell; vertical-align: middle; position:static;}#inner {position: relative; top: -50%;width: 600px;margin: 0auto;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><ahref="javascript:toggleContent('inner',1)">默认长度</a> <ahref="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 padding: .5em; clear: left;">Design by <a href="//www.forest53.com">Forestgan</a>本演示采用<ahref="//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.forest53.com/stat/mystat.asp?siteid=1"type="text/javascript"></script><noscript><p>stat.</p></noscript></body></html>