怎么让table在div正中间显示

本帖最后由 u011128789 于 2013-12-28 19:57:49 编辑

解决方案 »

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

table加align="center"属性就行了吧。垂直居中设置div的vertical没效果，一定要垂直居中，需要动态计算table的高度和div的剩余高度，设置下table的margin-top来居中
<div style="width:500px;height:500px;border:solid 1px #000;vertical-align:middle"><table border="1" align="center"><tr><td>1</td></tr></table></div>
<script>
var table=document.getElementsByTagName('table')[0];
table.style.marginTop=(500-table.offsetHeight)/2+'px'
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery/jquery-1.9.1.js"></script>
<style>
#container {
width:550px;
height:500px;
border:1px solid #321;
}</style>
</head>
<body>
<div id='container'>
<table width="400" border="1" id="buzhidao" >
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>a1</td>
    <td>a2</td>
    <td>a3</td>
    <td>a4</td>
    <td>a5</td>
    <td>a6</td>
    <td>a7</td>
    <td>a8</td>
  </tr>
  <tr>
    <td>b1</td>
    <td>b2</td>
    <td>b3</td>
    <td>b4</td>
    <td>b5</td>
    <td>b6</td>
    <td>b7</td>
    <td>b8</td>
  </tr>
  </table></div><script>
var $c = $("#container");
var $ch = $c.height();
var $cw = $c.width();var $b = $("#buzhidao");
var $bh = $b.height();
var $bw = $b.width();$c.css({position:'relative'});
$b.css({
position:'absolute',
left:($cw/2-$bw/2)+'px',
top:($ch/2-$bh/2)+'px'
});
</script>
</body>
</html>
按你的意思，div的高度是不固定的（因为table的列无限增加），那么div加上padding-top和padding-bottom就可以解决，然后table加上margin:0 auto;
如果div的高度固定，而且table随着列的增加也不会超过div的高度，那么可以用js判断：
在js插入table后，判断父容器（div）的高及table的高，公式：
（div的高-table的高）/2=table的margin-top的值或绝对定位top的值
你创建table的时候带上一个样式然后定义一下样式居中不就行了？
<div style="width:500px;height:500px;border:1px solid;">
        <div style="width:400px;height:400px;margin:50px;background: silver;overflow: auto">
            <table>
                .....
            </table>
        </div>
    </div>
设置div的文本对齐方式为居中，顶端对齐方式也是居中。
text-align:center
vertical-align:middle
margin:0 auto;加padding-right那些
div的高度我直接固定的但是随机生成的table的高度我要如何获取？
那你就一定要用div
不能换成table吗？table里面的东西不是直接可以居中
div的高度我直接固定的但是随机生成的table的高度我要如何获取？
抱歉，这两天没关注你的问题，谢谢你给了分！
jquery获取元素的高度很方便，你查看jquery手册便知！
如果没能解决，请联系我！