怎样实现网页整个页面垂直和水平居中
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>
<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>
最佳答案
0
其他回答(5)
0
楼主你的要所有的测试，网友表示压力很大啊
收获园豆：1
不需要所有都测试，就说1366*768的分辨率的，你可以用上面的代码把宽度和高度都调大了在测试一下
0
如果用 javascript 配合一下，就简单很多了。
收获园豆：3
感谢！我也这样想
0
现在最普遍的兼容所有电脑浏览器，试一下宽度960px；并页面垂直、水平居中
#div1{
width:960px;
margin:0 auto;
}
收获园豆：2
这个只能实现水平居中，不能实现垂直居中，margin：0 auto；这个很常用的，我还是知道的
使用绝对定位: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
没有问题呀，你可能调大高度和宽度的时候没有把这margin-left:-50px; margin-top:-25px;两个同步改变吧。这两个是一定要是宽和高的一半的负值。你试试没有问题的。
收获园豆：2
这个我早试过了，当宽度和高度足够大的时候，在笔记本上或者你缩小浏览器窗口，你就能看到问题了
@bokin: 缩小浏览器窗口倒是没试过。刚刚试了下在IE和搜狗没有问题哦
0
