首页新闻找找看学习计划

怎样实现网页整个页面垂直和水平居中

0
悬赏园豆:10 [已解决问题] 解决于 2012-12-09 02:12

怎样实现固定宽度、高度的页面在不同分辨率的屏幕上垂直、水平居中,要求兼容IE;以下代码如果在分辨率比较小的电脑上,顶部是不能完全显示的,注意是整个页面

<html>
<head>
<style style="text/css">
#div1
{
position
: absolute;
width
:100px;
height
:50px;
left
:50%;
top
:50%;
margin-left
:-50px;
margin-top
:-25px;
border
:1px solid #000
}
</style>
</head>
<body>
<div id="div1">我居中了吗?</div>
</body>
</html>
bokin的主页 bokin | 初学一级 | 园豆:185
提问于:2012-12-04 17:22
< >
分享
最佳答案
0

关于这个问题,目前找到了解决方案,暂时推荐这样http://www.ok22.org/art_detail.aspx?id=496

bokin | 初学一级 |园豆:185 | 2012-12-08 14:09
其他回答(5)
0

楼主你的要所有的测试,网友表示压力很大啊

收获园豆:1
chenping2008 | 园豆:9836 (大侠五级) | 2012-12-04 17:29

不需要所有都测试,就说1366*768的分辨率的,你可以用上面的代码把宽度和高度都调大了在测试一下

支持(0) 反对(0) bokin | 园豆:185 (初学一级) | 2012-12-04 17:32
0

如果用 javascript 配合一下,就简单很多了。

收获园豆:3
geass.. | 园豆:1777 (小虾三级) | 2012-12-05 20:38

感谢!我也这样想

支持(0) 反对(0) bokin | 园豆:185 (初学一级) | 2012-12-06 10:42
0

现在最普遍的兼容所有电脑浏览器,试一下宽度960px;并页面垂直、水平居中

#div1{

width:960px;

margin:0 auto;

}

收获园豆:2
小米哥 | 园豆:204 (菜鸟二级) | 2012-12-05 23:18

这个只能实现水平居中,不能实现垂直居中,margin:0 auto;这个很常用的,我还是知道的

支持(0) 反对(0) bokin | 园豆:185 (初学一级) | 2012-12-06 10:44

使用绝对定位:absolute

这是之前我做过的登陆界面,实现垂直和水平居中...

#login{
height: 240px;
width: 400px;
margin: -150px 0 0 -230px;
padding: 30px;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;background-color: #fff;
}

支持(0) 反对(0) 小米哥 | 园豆:204 (菜鸟二级) | 2012-12-06 13:33
0

没有问题呀,你可能调大高度和宽度的时候没有把这margin-left:-50px; margin-top:-25px;两个同步改变吧。这两个是一定要是宽和高的一半的负值。你试试没有问题的。 

收获园豆:2
拾梦小侠ด้้้ | 园豆:748 (小虾三级) | 2012-12-06 00:40

这个我早试过了,当宽度和高度足够大的时候,在笔记本上或者你缩小浏览器窗口,你就能看到问题了

支持(0) 反对(0) bokin | 园豆:185 (初学一级) | 2012-12-06 10:47

@bokin: 缩小浏览器窗口倒是没试过。刚刚试了下在IE和搜狗没有问题哦

支持(0) 反对(0) 拾梦小侠ด้้้ | 园豆:748 (小虾三级) | 2012-12-06 12:40
0

请看这篇博文:CSS未知高度垂直居中

收获园豆:2
dudu | 园豆:39683 (高人七级) | 2012-12-07 10:16

感谢你的回答,但是这还是解决不了我提出的问题,我的前提条件是整个网页垂直、水平居中,并且是足够大的宽度和高度

支持(0) 反对(0) bokin | 园豆:185 (初学一级) | 2012-12-07 11:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册