CSS方式控制DIV页面内绝对居中的好办法

核心思路是,通过设置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

(24)

“CSS方式控制DIV页面内绝对居中的好办法”的12个回复

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

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

    谢谢

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

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

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

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

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

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

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

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

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

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

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

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

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

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

发表评论

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