61,124
社区成员
发帖
与我相关
我的任务
分享让页面绝对居中，且可以随便改变页面布局兼容所有现代浏览器的方法
让页面绝对居中，且可以随便改变页面布局兼容所有现代浏览器的方法
Css的兼容性总是让人头疼，之前我做网站，因为难以控制css兼容所有的浏览器，所以只好用表格来布局，表格布局局限性很大，并且在Dreamweaver里看起来乱七八糟的，难以编辑。为了解决css的兼容性问题，我看过很多文章和书籍，貌似方法很多，但许多方法还是难以兼容所有的浏览器，而有的方法虽然可以实现兼容，但复杂的很。
而我最近却发现一种及其简单的方法，运用它可是实现绝对定位，并且在所有的浏览器中都是绝对一毫不差，并且可以实现在浏览器中绝对居中。
不废话了，上方法了：首先在页面的代码中加入<center></center>,位置为<body></body>的外层。然后在页面中加入一个层，将其style设为：position:relative;然后可以自行设置其高和宽，这时候这个层就绝对居中了，这个层将作为一个外壳，它起着很重要的作用，包括：保证居中和参考定位，也就是说内部元素的定位都是以这个层作为参考的。之后我们就可以来加别的内容层了，之后所加的所有的层的position属性都要设置成absolute。然后属性left和top都是参照第一个层的位置来设定的，还有最重要的一点，之后所有的层都要位于第一个层之内，在Dreamweaver中画层的时候，它生成的代码总是位于第一个层之后，这个时候定位出来的效果在IE和其他浏览器中是不同的，这时候我们就要记得把这个层拖进第一个层中，然后在可视化中重新调整层的位置就可以了。
这种方法简单可行，大家可以试一试哦，绝对好用，如果发现问题可以来咨询偶哦，QQ：676588498
Css的兼容性总是让人头疼，之前我做网站，因为难以控制css兼容所有的浏览器，所以只好用表格来布局，表格布局局限性很大，并且在Dreamweaver里看起来乱七八糟的，难以编辑。为了解决css的兼容性问题，我看过很多文章和书籍，貌似方法很多，但许多方法还是难以兼容所有的浏览器，而有的方法虽然可以实现兼容，但复杂的很。
而我最近却发现一种及其简单的方法，运用它可是实现绝对定位，并且在所有的浏览器中都是绝对一毫不差，并且可以实现在浏览器中绝对居中。
不废话了，上方法了：首先在页面的代码中加入<center></center>,位置为<body></body>的外层。然后在页面中加入一个层，将其style设为：position:relative;然后可以自行设置其高和宽，这时候这个层就绝对居中了，这个层将作为一个外壳，它起着很重要的作用，包括：保证居中和参考定位，也就是说内部元素的定位都是以这个层作为参考的。之后我们就可以来加别的内容层了，之后所加的所有的层的position属性都要设置成absolute。然后属性left和top都是参照第一个层的位置来设定的，还有最重要的一点，之后所有的层都要位于第一个层之内，在Dreamweaver中画层的时候，它生成的代码总是位于第一个层之后，这个时候定位出来的效果在IE和其他浏览器中是不同的，这时候我们就要记得把这个层拖进第一个层中，然后在可视化中重新调整层的位置就可以了。
这种方法简单可行，大家可以试一试哦，绝对好用，如果发现问题可以来咨询偶哦，QQ：676588498
...全文
请发表友善的回复…
发表回复
ie骁龙 2011-10-20
- 打赏
- 举报
感谢楼主，兼容性问题一直是 首要问题 顶楼主！！
lkq_net 2008-11-12
- 打赏
- 举报
直接在Body里面用 style:margin:0px auto; 不行吗？
Cyril_Tam 2008-11-11
- 打赏
- 举报
用JS找出浏览器可操作区域的宽度, 然后减去父DIV的宽度, 再除以2, 找出坐标, 然后设position:absolute, left:刚才找出的坐标点, top:0
这样做也是绝对居中的
这样做也是绝对居中的
bhbhxy 2008-11-10
- 打赏
- 举报
那还不如加个align:center来得直接。。。
cy527300280 2008-11-10
- 打赏
- 举报
谢谢LZ,这个方法太好了
yang709610485 2008-11-09
- 打赏
- 举报
.........................
xiaojing7 2008-11-09
- 打赏
- 举报
谢
neo_yoho 2008-11-09
- 打赏
- 举报
哦.
