div居中，但如果有竖着的滚动条，div会往左偏，怎么解决？
本帖最后由 zlbpolly 于 2013-08-07 13:54:46 编辑 div居中，如果网页内容比较长，出现竖滚动条时，居中的div会受滚动条影响，往左边偏 ？怎么解决呢？
原本是这样
<!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>
<title>Untitled Page</title>
<style>
html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,blockquote,pre,form,input,textarea,fieldset,table,th,td{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.6 Tahoma,Verdana,Arial,"\5b8b\4f53"}
body{background:#fff;color:#7d7d7d;min-width:960px}
ul,ol{list-style:none}
img{border:0;vertical-align:top}:focus{outline:0}
.doc-hd,.doc-bd{width:960px;margin:0 auto}.doc-bd{padding-bottom:20px}
.logo{background:url(http://p2.qhimg.com/t011554d7f1d248cbd5.png) no-repeat}
.main{width:623px;float:left}.side{width:318px;float:right;border:1px solid #f0f0f0;border-top:0}.bd{padding:10px 15px}
.doc-hd{height:52px;position:relative;z-index:999}
.logo{width:222px;height:46px;float:left;margin-top:4px;margin-left:-7px}.info{float:left;margin-top:8px}.info a{color:#7d7d7d;font-size:12px}.info a:hover{color:#20a135}.info img{padding-top:4px
}
.nav{float:right;font:16px/25px "\5fae\8f6f\96c5\9ed1";position:absolute;right:0;top:16px}
.nav li{float:left;margin-left:38px}.nav a{height:34px;color:#555;float:left;cursor:pointer;position:relative}
.nav a:hover,.nav .cur{color:#20a135}
.nav .hot,.nav .new{background-position:-24px -144px;width:23px;height:14px;display:block;position:absolute;right:-24px;top:-2px;*top:-3px}
.nav .new{background-position:0 -144px}
</style>
</head>
<body>
<div class="doc-hd">
<a target="_self" title="logo" class="logo" href=""></a>
<ul class="nav">
<li><a target="_self" class="cur" href="#">首页</a></li>
<li><a>产品列表</a></li>
<li><a>公司介绍</a></li>
<li><a href="#">产品展示</a></li>
<li><a>个人服务</a></li>
<li><a>企业服务</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
</body>
</html>
div居中?滚动条?偏
<!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>
<title>Untitled Page</title>
<style>
html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,blockquote,pre,form,input,textarea,fieldset,table,th,td{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.6 Tahoma,Verdana,Arial,"\5b8b\4f53"}
body{background:#fff;color:#7d7d7d;min-width:960px}
ul,ol{list-style:none}
img{border:0;vertical-align:top}:focus{outline:0}
.doc-hd,.doc-bd{width:960px;margin:0 auto}.doc-bd{padding-bottom:20px}
.logo{background:url(http://p2.qhimg.com/t011554d7f1d248cbd5.png) no-repeat}
.main{width:623px;float:left}.side{width:318px;float:right;border:1px solid #f0f0f0;border-top:0}.bd{padding:10px 15px}
.doc-hd{height:52px;position:relative;z-index:999}
.logo{width:222px;height:46px;float:left;margin-top:4px;margin-left:-7px}.info{float:left;margin-top:8px}.info a{color:#7d7d7d;font-size:12px}.info a:hover{color:#20a135}.info img{padding-top:4px
}
.nav{float:right;font:16px/25px "\5fae\8f6f\96c5\9ed1";position:absolute;right:0;top:16px}
.nav li{float:left;margin-left:38px}.nav a{height:34px;color:#555;float:left;cursor:pointer;position:relative}
.nav a:hover,.nav .cur{color:#20a135}
.nav .hot,.nav .new{background-position:-24px -144px;width:23px;height:14px;display:block;position:absolute;right:-24px;top:-2px;*top:-3px}
.nav .new{background-position:0 -144px}
</style>
</head>
<body>
<div class="doc-hd">
<a target="_self" title="logo" class="logo" href=""></a>
<ul class="nav">
<li><a target="_self" class="cur" href="#">首页</a></li>
<li><a>产品列表</a></li>
<li><a>公司介绍</a></li>
<li><a href="#">产品展示</a></li>
<li><a>个人服务</a></li>
<li><a>企业服务</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
<div style="height:1000px;border:1px solid #ff0">ddd</div>
</body>
</html>
[解决办法]
CSS中设置始终出现滚动条即可。
[解决办法]
body{overflow-y:scroll;}