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>例子</title>
<script type="text/javascript">
window.onload = function(){
    document.getElementById("a").style.margin = "0 auto";
    document.getElementById("a").style.textAlign = "center";
}
</script>
<style type="text/css">
#b
{
    margin: 0 auto;
    text-align:center;
}
</style>
</head>
<body>
<div id="a">abc<img src="1.jpg" width="200" height="200" /></div>
<div id="b">def<img src="1.jpg" width="200" height="200" /></div>
</body>
</html>

解决方案 »

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

楼上兄弟我要的是div在页面中间呀。不过，<div style="position:absolute;top:40%;left:40%;">只有这样可行，但是其他任何方式都不成。不知道咋回事了。但愿其他高手能给个好方法
<!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>例子</title>
<script type="text/javascript">
window.onload = function(){
    document.getElementById("a").style.position = "absolute";
    document.getElementById("a").style.left = "50%";
    document.getElementById("a").style.top = "50%";
}
</script>
</head>
<body>
<div id="a">abc<img src="1.jpg" alt="1.jpg" /></div>
</body>
</html>
不过， <div   style="position:absolute;top:40%;left:40%;"> 只有这样可行，但是其他任何方式都不成。不知道咋回事了。但愿其他高手能给个好方法
这个方法不好吗不正好满足你的需求吗
div的水平居中按楼上的或者设置align="center"，至于垂直居中有几种方法，到网上搜索下就知道了，反正没有td的valign那么好那么完美。
zhengshaodong 大侠我碰上一个可以认为称为人品的问题。网上能搜到的方法，貌似在我手里能正常的使用就是没有.......所以我想多试试其他方法.
呵呵，既然td滴valign很完美，
那么为什么不利用它呢？！
L@_@K
<!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>css.table.centerMiddlePosition.html</title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="Gao YiXiang" />
    <meta name="email" content="[email protected]" />
    <meta name="keywords" content="javascript dhtml dom" />
    <meta name="description" content="I love web development." />
    <style type="text/css">
*
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
body
{
    height: 100%;
}
#divTest
{
    background-color: #ffff00;
    border: 1px dotted red;
    width: 500px;
    height: 500px;
}
.tbeFrame
{
    border-collapse: collapse;
    border: 1px solid blue;
    width: 100%;
    height: 100%;
}
.tbeFrame td
{
    text-align: center;
    vertical-align: middle;
}
    </style>
</head>
<body>
    <table class="tbeFrame" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div id="divTest">
                    <h3>
                        利用 css + table 实现 Div 居中</h3>
                    <table class="tbeFrame" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0" border="0" style="background-color: #8888ff;
                                    width: 250px; height: 100px;">
                                    <tr>
                                        <td align="right">
                                            用户名：
                                        </td>
                                        <td>
                                            <input id="tbxUn" type="text" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="right">
                                            密码：
                                        </td>
                                        <td>
                                            <input id="tbxPw" type="password" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="right" colspan="2">
                                            <input id="Button1" type="button" value="button" />
                                            <input id="Button2" type="button" value="button" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
<!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>
<style type="text/css">
.head{
text-align:center;
height:20px;
margin:auto;
width:860px;
}
.left{
margin:5px;
float:left;
border:1px double;
border-color:#000000;
background-color:#999999;
width:200px;
height:20px;
}
.right{
margin:5px;
float:left;
border:1px groove;
background-color:#99CCFF;
border-color:#0099FF;
width:200px;
height:20px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<div class="head">
<div class="left">2321321312312</div>
<div class="right">1231231231221</div>
<div class="left">2321321312312</div>
<div class="right">1231231231221</div>
</div>
</body>
</html>
<!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>
<style type="text/css">
.head{
text-align:center;
height:20px;
margin:auto;
width:860px;
}
.left{
margin:5px;
float:left;
border:1px double;
border-color:#000000;
background-color:#999999;
width:200px;
height:20px;
}
.right{
margin:5px;
float:left;
border:1px groove;
background-color:#99CCFF;
border-color:#0099FF;
width:200px;
height:20px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<div class="head">
<div class="left">2321321312312</div>
<div class="right">1231231231221</div>
<div class="left">2321321312312</div>
<div class="right">1231231231221</div>
</div>
</body>
</html>
<!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>
<style type="text/css">
.head{
text-align:center;
height:20px;
margin:auto;
width:860px;
}
.left{
margin:5px;
float:left;
border:1px double;
border-color:#000000;
background-color:#999999;
width:200px;
height:20px;
}
.right{
margin:5px;
float:left;
border:1px groove;
background-color:#99CCFF;
border-color:#0099FF;
width:200px;
height:20px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
</head> <body>
<div class="head">
<div class="left">2321321312312 </div>
<div class="right">1231231231221 </div>
<div class="left">2321321312312 </div>
<div class="right">1231231231221 </div>
</div>
</body>
</html>