相关文章
网站制作网页制作基础：HTML标签和属性的语义化
网站制作Dreamweaver快速制作细边线表格
网站设计网站被挂马 ARP地址欺骗解决之道
网站制作细谈有关网站设计的10个注意要点
企通互联详细讲解HTML网页设计中关于字体的设计
北京网站建设网站设计常犯的十大典型错误
网站建设完美影音享受 新版PPStream试用手记
网站制作两分钟做个xhtml+css的网站首页
网页设计Photoshop简单打造逼真的火焰
北京网站制作怎样设计人性化的登录界面
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网页设计网站建设实现CSS制作网页时绝对居中问题的总结
北京网页设计网站建设实现CSS制作网页时绝对居中问题的总结
什么叫绝对居中？就是说容器到屏幕左右上下四个方向都有间距，并且随屏幕大小缩放相对不变或者等比例调整，始终居屏幕中间。 绝对居中也有两种情况，容器的绝对大小和相对大小。 同时有很多方法可以实现，总结起来大致如下： 北京网站制作
站.长.站
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">网站建设 |
中.国站长站
2.利用负边距方法，绝对定位使容器相对屏幕绝对居中，此时的被嵌套容器只能为绝对大小。（标准）根据margin负值和top left www.qitongnet.com的比例控制，实现随屏幕绝对居中，容器大小改变需要重新调整margin top left的参数： Www.Chinaz.com
| 以下为引用的内容：网页设计 <div style="background:#f00; width:740px; height:340px; left:50%; margin:-170px 0 0 -370px; position:absolute; top:50%;">网站设计 |
Chinaz^com
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"> Www^Chinaz^com 企通互联 网站设计 <!--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测试通过，绝对定位，直接定位上下左右，强制边局实现容器相对大小（标准）： [中国站长站]
代码：略 Chinaz.com
7.ff1.5 IE5 IE6通过测试 中国站.长.站
| 以下为引用的内容：网站制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">企通互联 中国站长_站,为中文网站提供动力 北京网站建设#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> Www_Chinaz_com 北京网站制作 <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> Www@Chinaz@com |
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> Chinaz.com |
Chinaz^com
上一篇：北京网站制作DIV+CSS布局网页页面实现多风格选择的方法
下一篇：网站制作实现CSS制作网页时绝对居中问题的总结
