我的代码哪里错了‘,为什么登录框不居中?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标拖拽效果</title>
<style>
html{ height:100%;}
body{ background: url(img/baidu_demo.png) no-repeat top center; font-size:16px; font-family:"Microsoft YaHei UI"; }
.xier-ui-dialog{
width:380px; height:auto;
z-index:9000;
position:absolute;
top:100px;
left:100px;
border:1px #ccc solid;
}
.xier-ui-title{
height:38px; line-height:38px; color:#666;
padding-left: 20px; background-color:#efefef;
cursor:move;
user-select:none;
}
.xier-ui-closebutton{
width:16px;
height:16px;
display:block;
position:absolute;
top:12px;
right:20px;
background:url(img/close_def.png) no-repeat;
cursor:pointer;
}
.xier-ui-closebutton:hover{
background:url(img/close_hov.png) no-repeat;
}
.xier-ui-content{
padding:15px 20px;
background-color:#fff;
}
.xier-ui-input{ display:block; width:100%;height:40px; margin-bottom:12px; border:1px #ccc solid;
font-size:16px; text-indent:25px; outline:none;
color:#ccc;
}
.ui-dialog-input-name{ background: url(img/input_username.png) no-repeat top left; }
.ui-dialog-input-password{ background: url(img/input_password.png) no-repeat top left;}
.xier-ui-submit{ width:100%; height:40px; line-height:40px; display:block; background:#3b7ae3;border:none;font-size: 16px;color: #fff; text-decoration:none;
text-align:center;}
.ui-dialog-l40{ height:40px; line-height:40px; text-align:right;}
/*遮罩层*/
.link{ text-align:right; line-height:20px; padding-right:20px;}
.xier-ui-marst{ width:100%; height:100%; background-color:#000; opacity:0.4; filter:alpha(opacity:40); position:absolute; top:0px; left:0px; display:none;}
</style>
</head>
<body>
<!--登录框-->
<div class="xier-ui-dialog" id="dialog">
<div class="xier-ui-title" id="dialogTitle">登录通行证
<div class="xier-ui-closebutton"></div>
</div>
<div class="xier-ui-content">
<div class="xier-ui-L40">
<input type="input" class="xier-ui-input ui-dialog-input-name" value="手机号/电子邮箱/用户名">
</div>
<div class="xier-ui-L40">
<input type="input" class="xier-ui-input ui-dialog-input-password" value="密码">
</div>
<div class="ui-dialog-l40"><a href="##">忘记密码</a></div>
<div><a href="##" class="xier-ui-submit">登录</a></div>
<div class="ui-dialog-l40"><a href="##">立即注册</a></div>
</div>
</div>
<!--遮罩层-->
<div class="link"><a href="javascript:showDialog();">登录</a></div>
<div class="xier-ui-marst" id="marst" onselectstart="return flase"></div>
<script type="text/javascript">
//获得元素对象
function g(id){
return document.getElementById(id);
}
// 自动居中 -登录浮动(el=Element)
function autoCenter( el ){
var bodyW=document.documentElement.clientWidth;
var bodyH=document.documentElement.clientHeight;
var elW=el.offsetWidth;
var elH=el.offsetHeight;
el.style.left=-(bodyW-elW)/2 +"px"
el.style.top=-(bodyH-elH)/2 +"px"
}
// 自动全屏遮罩
</script>
</body>
</html>