如何用js来控制div页面居中的问题？麻烦大神指教

如题，有人知道的麻烦附上代码，谢谢!

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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 Align Center</title>
<script type="text/javascript">
window.onload = function() {
var myDiv = document.getElementById("myDiv");
myDiv.align = "center";
}
</script>
</head>
<body>
<div id="myDiv">Div Align Center....</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var doClick=function(param){
if(param==0){
document.body.style.textAlign="left";
}else if(param==1){
document.body.style.textAlign="center";
}else{
document.body.style.textAlign="right";
}
} </script>
<style></style>
</head><body onload="doLoad();">
<div id="div1" style="width:500px; height:300px; background-color:#0CC;" >
sssssssssssssssssssss
</div>
<input type="button" onclick="doClick(0)" value="左"/>
<input type="button" onclick="doClick(1)" value="中"/>
<input type="button" onclick="doClick(2)" value="右"/>
</body>
</html>
必须用js？
http://www.baidu.com/s?wd=div%D2%B3%C3%E6%BE%D3%D6%D0&rsv_bp=0&rsv_spt=3&rsv_n=2&inputT=598
<div id="box" style="width:400px;height:200px;background-color:#f00;position:absolute;"></div>
<script type="text/javascript">
var box=document.getElementById('box');
box.style.left=Math.floor((document.documentElement.clientWidth-400)/2)+'px';
box.style.top=Math.floor((document.documentElement.clientHeight-200)/2)+'px';
</script>
你是要在某个元素内居中还是在浏览器可视范围内居中？
而且你只是要水平居中还是水平和垂直都居中？
如果在元素内水平居中直接用text-align的css样式来控制，js就如上面的
如果是在浏览器可视范围内居中js实现的话
可以先获取可视范围的高宽如
document.documentElement.clientHeight
document.documentElement.clientWidth
然后获取元素的的高宽如
document.getElementbyId("xx").offsetHeight
document.getElementbyId("xx").offsetWidth
然后再控制元素的位置如
top:(可视范围高度- 当前元素高) / 2;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#align{
width: 600px;
height: 300px;
border: 1px solid black;
}
.center{
margin: 0 auto;
}
</style>
</head><body>
<div id="align" style="width: 600px; height: 300px; border: 1px solid black;"></div>
<script>
function addClass(elem, clz){
var className = elem.className
elem.className = className === "" ? clz : (className + " " + clz);
}
addClass(document.getElementById('align'), "center");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#align{
width: 600px;
height: 300px;
border: 1px solid black;
}
.center{
margin: 0 auto;
}
</style>
</head><body>
<div id="align"></div>
<script>
function addClass(elem, clz){
var className = elem.className;
elem.className = className === "" ? clz : (className + " " + clz);
}
addClass(document.getElementById('align'), "center");
</script>
</body>
</html>
我就是想某个div在浏览器的可视范围内居中，就是想要获取可视范围的高宽这种方法
<script type="text/javascript">
    var box=document.getElementById('box');
    var height=document.getElementbyId("box").offsetHeight;
    var width=document.getElementbyId("box").offsetWidth;
    box.style.left=Math.floor((document.documentElement.clientWidth-height)/2)+'px';
    box.style.top=Math.floor((document.documentElement.clientHeight-width)/2)+'px';
</script>
<div class="picShow" id="box">这样写对吗？
style="width:600px;margin:auto;" ; 这样就可以居中了如果是绝对定位，
设置left = （页面可见区域宽度 - div 宽度）/2  ; 就可以了
right!  这样是水平和垂直都居中如果仅仅只要水平居中，margin:0 auto；width:600px; 就行了
像10楼的那样，用css样式控制就行了。