核心思路是,通过设置top和Left居中(50%),然后再用负的margin,实现DIV中心居中。

这段代码兼容性很好,代码简单,没用Tabel,没用JS,没用expression

不过总觉得现在CSS的系统设计上还有很多不合理的地方,简单页面设计用一下也可,但复杂的页面设计完全用CSS几乎不可能,而且标准化设计所推崇的表现和内容分离现阶段根本实现不了,往往为了实现表现上的设计还要去修改HTML文件;CSS只能作为补充,不可能取代。

进一步的解释:

1)首先通过设置left和top都为50%,这时div的左上角应该在显示区域的中心

css
top: 50%;   left: 50%;

2)然后根据div的宽和高,分别做1/2的偏移,这是通过margin来实现,实际使用中不一定1/2,你可以根据特殊需要调整.

css
margin: -200px auto auto -275px;
height: 400px; width: 550px;

3)div必须有确定的宽和高,只有这样才能计算出margin.
完整代码如下

盒模型 div 布局(W3C推荐)居中
css
body {
    margin: 0;    padding: 0;
}
div {
   margin: -200px auto auto -275px;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 550px;
   height: 400px;
   background: #f60;
   text-align: center;
   line-height: 400px;
}


正好今天看到两个关于网页标准化的文章,和我的观点很相似,转一下地址
http://www.pjhome.net/article.asp?id=535

(41)

分类: Web

12 条评论

Hick · 2006/03/15 10:56 下午

:) 真有创意!
不过还是不大明白其原理,kometo自己想出来的吗?margin为负没问题,这时候left为50%怎么解释呢?

不是的话可否贴一下原文地址?

谢谢

kometo · 2006/03/16 9:10 上午

原文已经记不清了地方了,原文中好像也只有代码,没有解释,这是我后来根据理解又写出来的.

不过总的感觉是CSS本来是为了方便设计,结果现在CSS成了新的标准统一的障碍,而且似乎走的越来越偏激.

我在上面又做了一点补充说明,你可以看看.

Hick · 2006/03/16 10:42 上午

:) 这个想法是相当有意思的。。。我理解的时候先来想的margin,再去理解top,left,所以想着十分别扭。。。。

实际应用着这样布局好象必须在body里有一个大的div,然后在里边布局,要不然把body里的div一个个的这样来居中比较吃力? :)

Hick · 2006/03/16 6:07 下午

BTW: 实际应用中好象不大好使,真的是“W3C推荐”的吗?

kometo · 2006/03/17 9:04 上午

我说的w3c推荐是指:
这是唯一的,符合标准的,没有借助其它代码(JS),实现div绝对居中的CSS控制方式.

至少这是我找到的唯一有效的方法,其它的很多方法都有各种弊端.

用CSS来控制位置本来就是一件吃力的事情,如果面对的的多种浏览器,就成恶梦了,以前我还经常尝试完全使用CSS来控制位置,现在已经放弃了,除非是非常简单的页面的布居.

至于是不是使用主控div,跟据具体情况,很多时候是有必要的

Hick · 2006/03/17 1:44 下午

嘿嘿,“唯一”这种词汇还是慎用咯。。。

http://www.w3cn.org/article/tips/2004/83.html 就提供一种更好理解的方法,那个网站也不错,可以去看看。。。

kometo · 2006/03/17 8:57 下午

你推荐的页面我在以前查找居中处理方式时已经看过,包括这个站的其它的一些内容,但是遗憾的是它没有提供有效的方法,文中提到图片居中和文本居中,但利用这两种思路都实现不了div的居中,或者说其实它们根本就是两码事.

我这个人很少说绝对的话,但是这个div居中确实是我当时花了至少两个星期查找资料,反复尝试,最后才找到的一个有效的办法.

这么简单的一个设计需求,用CSS居然这么难,经过这件事,我就对CSS彻底失望了,就像我文中说的”CSS只能作为补充,不可能取代”,而且还是有限的补充.

BTW:我知道,其实这肯定不是唯一.呵呵

William · 2007/03/13 11:11 下午

Bad news T

卡卡伊云 · 2007/07/24 5:19 上午

谢谢,呵呵上面的方法很管得用哦!我刚刚正好碰到这个问题做了很久没做出来。

卡卡伊云 · 2007/07/24 6:33 上午

不行他不能自适应,不能用。

kometo:要求居中的块要定高定宽,其它是可以自适应的。

Petrovich · 2008/05/07 5:26 下午

Stop! Try to read this interested book:,

foxprincess · 2009/11/16 9:29 上午

谢谢楼主,其实只要定出宽高,确实是居中的好办法,如果不定宽高,那是不行的,已经用过,谢谢,很管用

发表评论

电子邮件地址不会被公开。