今天比较清闲，写了个Div居中的例子

xingqiliudehuanghun 2009-03-05 05:33:18
对浮动定位这一块始终不是很清楚，陈今天清闲写了个Div剧中的例子，本来应该很简单但由于IE6不支持
position:fixed,害我折腾了半天。若果没有IE6我估计我们这些做Web开发的日子会好过好多。
希望大家把自己的解决方案发上来交流一下。简单介绍下原理。对于IE7+以及标准浏览器，
没什么可说的position:fixed就可以了，_position是为了在重新设置IE6所支持position
属性。document.documentElement.clientHeight==0是判断是否设置了DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使DIV绝对居中(兼容IE6+ FireFox)</title>
<style type="text/css">
body,html{height:100%;padding:0;margin:0;}
.divPanel{
border:1px solid red;
width:100px;
height:100px;
left:800px;
top:20px;
position:fixed;
_position:absolute;
_top:expression(eval(
document.documentElement.clientHeight==0
?(document.body.scrollTop)
:(document.documentElement.scrollTop)
)+20+"px");
}
#panel2{
border:1px solid #339966;
width:300px;
width:300px;
height:100px;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-50px;
position:fixed;

_position:absolute;
_left:expression(eval(
document.documentElement.clientHeight==0
?document.body.offsetWidth
:document.documentElement.clientWidth
)/2+"px");
_top:expression(eval(
document.documentElement.clientHeight==0
?(document.body.scrollTop+document.body.clientHeight/2)
:(document.documentElement.scrollTop+document.documentElement.clientHeight/2)
)+"px");
}
</style>
</head>
<body>
<!--
<textarea id="txt1" rows="20" cols="60"></textarea>
<textarea id="txt2" rows="20" cols="60"></textarea>
<textarea id="txt3" rows="20" cols="60"></textarea>-->
<div id="panel" class="divPanel"></div>
<div id="panel2">dddd</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
...全文
551 23 打赏 收藏 转发到动态 举报
写回复
用AI写文章
23 条回复
切换为时间正序
请发表友善的回复…
发表回复
xiaoqisq 2009-06-07
  • 打赏
  • 举报
 回复
特地注册了一个帐号，来感谢一下楼主。
在网上找了好多代码，都无效（不少于3个小时，莫非我RP太差）。
只有楼主这个是真正能够在IE6下显示fixed
MagicPeng 2009-03-16
  • 打赏
  • 举报
 回复
学习了
pangzi90kg 2009-03-16
  • 打赏
  • 举报
 回复
学习学习学习
Kepin_moo 2009-03-16
  • 打赏
  • 举报
 回复
学习学习
dandelionl 2009-03-16
  • 打赏
  • 举报
 回复
mark
zing02223 2009-03-11
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 xingqiliudehuanghun 的回复:]
忘了，老哥的那个效果在ie7下没问题,只是不能随屏幕浮动了多少有点可惜
[/Quote]
我没能明白这是什么问题。比方说做什么效果会与想象中有偏差？
今天我去公司后再实验下。

http://labs.cloudream.name/google/chart/api.html


说的是右上角“新版文档翻译中”吗？

这个是IE6常用的漂浮广告的写法JS获取坐标，把针对body的#history_panel层TOP值动态更改。
非IE6浏览器用的都是position:fixed;的方法。

和你的上面的写法很相似。我在家，没工具测试。CSS文件里面是没有“_”的写法。所以猜google是写在JS里面了。


用IE6时，打开任务管理器看一下，然后用滚轮滚动，CPU会飙的很高，这和JS动态获取有关。单看影响不是很大，如果在系统资源比较吃紧的情况下，可能会暂时性卡机。

不过现在外面为兼容浏览器，都是这样写的。我做的范例可以实现非JS的效果，如果做弹性的百分比布局，以后对100%宽度的运用上就不太爽了。兼容浏览器的时候不能赋予宽度值，IE6必须配合上zoom使用，不过这个示例可以扩展很多效果，比方说模拟facebook登陆后页脚的登陆用户状态信息。对了，你需要的这效果也可以用iframe实现，facebook的是用iframe做的，所以在IE6下滚动滚动条没有产生抖动。还是老外想象能力丰富，有时间可以想想如何用iframe实现的。
xingqiliudehuanghun 2009-03-10
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 zing02223 的回复:]
呵呵，还有更好的方法，无需JS
[/Quote]
无需JS也能在ie6下实现positon:Fixed?没见过，能否发一下。我见过的一些据说不用js的仅仅是在不滚动
滚动条的情况下能实现剧中，有滚动就不行了
zing02223 2009-03-10
  • 打赏
  • 举报
 回复
呵呵，还有更好的方法，无需JS
xingqiliudehuanghun 2009-03-10
  • 打赏
  • 举报
 回复
忘了，老哥的那个效果在ie7下没问题,只是不能随屏幕浮动了多少有点可惜
xingqiliudehuanghun 2009-03-10
  • 打赏
  • 举报
 回复
我CSS不是很在行，有些地方还不不能完全体会出妙处。其实我最初写这个的目的是想用最简单的方式实现
那种在页面一侧或两侧的漂浮面板或广告,因为以前从来没写过所以想写一下。这是我最初看到的那个面板
http://labs.cloudream.name/google/chart/api.html。问老哥一下那个效果是一般是怎么做的，google
比较厉害，挖了半天也没有看到实质性的代码，最后自己写了
zing02223 2009-03-10
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使DIV绝对居中(兼容IE6+ FireFox)</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
overflow:visible;
overflow-x:hidden!important;
overflow-y:hidden!important;
overflow:hidden;
position:relative;
}
div#body{
width:100%;
height:100%;
position:relative;
overflow-x:auto;
overflow-y:scroll;
cursor:default;
vertical-align:middle;
}
.divPanel{
border:1px solid red;
width:100px;
height:100px;
left:800px;
top:20px;
position:absolute;
}
#panel2{
border:1px solid #339966;
width:300px;
width:300px;
height:100px;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-50px;
position:absolute;
}
</style>
</head>
<body>
<div id="panel" class="divPanel">divPanel</div>
<div id="panel2">panel2</div>
<div id="body">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>

----------------------------------------
兄弟看看行不行.IE7没有测试了，我没装IE7浏览器，IE8也不知道。
zing02223 2009-03-10
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 xingqiliudehuanghun 的回复:]
引用 11 楼 zing02223 的回复:
呵呵，还有更好的方法，无需JS

无需JS也能在ie6下实现positon:Fixed?没见过，能否发一下。我见过的一些据说不用js的仅仅是在不滚动
滚动条的情况下能实现剧中，有滚动就不行了
[/Quote]

还能居中？不好意思，这个我还没注意看到。一会实验下，先把工作完成了


大概三小时后：）
xingqiliudehuanghun 2009-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 wz_307 的回复:]
针对左右居中使用margin-left:auto;margin-right:auto;不是很好吗?
[/Quote]
当然是没问题了，但你那样布局还可以，用来模拟对话框什么的或者写个浮动广告或浮动面板就不行了。
应用不一样所以策略不一样。
wz_307 2009-03-05
  • 打赏
  • 举报
 回复
针对左右居中使用margin-left:auto;margin-right:auto;不是很好吗?
xingqiliudehuanghun 2009-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 zswang 的回复:]
不知道这样算不算····
HTML code<html><head><body><divstyle="left:50%;position:absolute;top:50%;"><divstyle="position:absolute;left:-100px;top:-150px;width:200px;height:300px;background-color:Red"></div></div></body></html>
[/Quote]
不算，因为你多加几个<br/>有了滚动条之后就不行了
haibo20081212 2009-03-05
  • 打赏
  • 举报
 回复
hehe
cremerchen 2009-03-05
  • 打赏
  • 举报
 回复
哈哈。有意思
王集鹄 2009-03-05
  • 打赏
  • 举报
 回复
不知道这样算不算····
<html>

<head>

<body>

<div style="left:50%;position:absolute;top:50%;">

	<div style="position:absolute;left:-100px;top:-150px;width:200px;height:300px;background-color:Red"></div>

</div>

</body>

</html>
x_pengcheng 2009-03-05
  • 打赏
  • 举报
 回复
谢谢分享
加载更多回复（3）
h5居中loading_H5样式与布局 --常用居中方法
近日清闲，决定用博客来总结下入行一年多来零零散散记录在小本本上的知识点。先看布局1.常用居中方法我们假设DOM文档结构如下，子元素要在父元素中居中：啦啦啦我要居中水平居中实现水平居中的前提是父元素有一个宽度，没有设置的话，默认为上一级的宽度。子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：1.行内元素&&不定宽块状元素：对父元素设置text-a...
H5样式与布局 --常用居中方法
近日清闲，决定用博客来总结下入行一年多来零零散散记录在小本本上的知识点。 先看布局 1.常用居中方法 我们假设DOM文档结构如下，子元素要在父元素中居中： <div class="parent"> <div class="child"> 　　<span>啦啦啦</span> 　　<p>我要居中&l...
最近比较清闲
好久不来我的博客了，都长草了，最近还是比较清闲，准备了一个测试工具和测试仪表的讲座，其他就是做做标准什么的，培训还好做，标准就难了，可能要很长时间吧，不过也不急，慢慢来！！拔草拔草有时间还是要写写文章，好久不写了，都生疏了（你什么时候熟过）呵呵快过国庆节了，大家国庆快乐，中秋快乐 
今天真的很清闲呀
呵呵，今天真的很清闲，一天没啥事干，只是看看书，期间还玩了一会游戏，要是能经常这样就好了。 继续看了一会spring2，囫囵吞枣看完了aop，不瞒大家说，真的没看懂哦，AOP的原理原来就了解一些，但也没用过，spring2里的两种应用方式看得头晕了，等用到了再仔细研究吧，还有许多们的应用例子也有，不着急。 又到年底了，又到了跳槽高峰期了，要不要跳槽呢，还没想好，暂时不想了，过了年再说吧，打电话暂时...
是不是女生应该留在高校做老师，因为比较清闲？
 是不是女生应该留在高校做老师，因为比较清闲？Q:我是个当届将要毕业的女生。很多朋友劝我留在高校做老师，因为比较清闲，适合女生。但是我想出去闯闯。请问您的意见是？-------------------------------------------------------------------- A：  最重要的是“你对教育有没有兴趣和激情？”我认为如果你只是为了谋个清闲、稳
CSS

61,115

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章