单纯的使table居中实际上并不复杂，但是要在table内进行微调，满足不同的需求，需要使用绝对定位，但是，这样一来，如果分辨率不同，在不同的分辨率下显示效果不好，影响用户体验。因此我们在table内，通过绝对定位，然后通过动态控制table的位置，这样保证了在不同的分辨率下看到的效果是一样的。
下面给出示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dojo practise</title>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true,isDebug:false"></script>
<script type="text/javascript">
var init=function(){
var win_width=window.screen.availWidth;
var win_height=window.screen.Height-window.screenTop-65;/*其中65 表示浏览器下面的状态条的高度*/
var mytable=dojo.byId("mytable");
var table_width=mytable.width;
var table_height=mytable.height;
var table_top=(win_height-table_height)/2;
var table_left=(win_width-table_width)/2;
dojo.query("#mytable").style("position","absolute");
dojo.query("#mytable").style("left",table_left);
dojo.query("#mytable").style("top",table_top);
}
dojo.addOnLoad(init);
</script>
<style type="text/css">
body{
background-color:#66CCCC;
}
</style>
</head>
<body>
<table id="mytable" width="600px" height="100px" >
<tr>
<td style="background:green; text-align: center;">居中显示!</td>
</tr>
</table>
</body>
</html>
这里是通过dojo实现的，因此应该把dojo.js的位置描述正确；
注意代码中高亮部分的设置，如果不给出position属性，那么top，left是不会生效的！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
