直接源码，有不懂的请留言。
<!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>权限登录</title>
<link href="css/master.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
divresize();
});
/**自应高度**/
function divresize() {
resizeU();
$(window).resize(resizeU);
//这个方法是让无论，浏览者电脑屏幕如何。都能让div居中，垂直居中，div的id是AT
function resizeU() {
//css("width")这样获取的是 数字加px,
var logindiv_width = $("#AT").css("width").replace("px", "");
//css("height")这样获取的是 数字加px
var logindiv_height = $("#AT").css("height").replace("px", "");
$("#AT").css({
"margin-left": ($(document).width() - logindiv_width) / 2,
"margin-top": ($(document).height() - logindiv_height) / 2,
});
}
}
</script>
</head>
<body class="move">
<div id="AT">
<div class="header">
<div class="headerLogo"><img src="images/headerLogo.gif" /></div>
</div>
<div class="main">
<div class="login">
<div class="loginTitle">
用户权限管理系统
</div>
<div class="loginForm">
<form>
<div class="prompt">请输入正确的用户名或密码！</div>
<input type="text" value="请输入用户名" class="loginUser" />
<input type="text" value="请输入密码" class="loginPassword"/>
<div class="rememberPs">
<input type="checkbox" class="mr10" />记住密码
</div>
<input type="button" class="loginBtn">
</form>
</div>
</div>
</div>
<div class="footer">技术支持：安徽省XXX有限公司</div>
</div>
</body>
</html>
如下图所示：
