CSS:模拟Windows窗口及DIV居中
利用CSS，尝试做了一个仿Windows窗口的横向纵向均居中的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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动易远程接口中转</title>
<style type="text/css">
<!–
body {margin:0px;background:#ccc;height:auto;font: 9pt Tahoma;text-align:center;color: #000;}
#outbox {position:absolute;z-index:888;top:50%;left:50%;margin:-120px 0 0 -200px;width:400px;height:auto;background:#D4D0C8;border:1px solid #ccc;}
#title,#body,#bottom {border-top:1px solid #ddd;border-bottom:1px solid #999;border-right:1px solid #999;border-left:1px solid #ddd;}#title {line-height:28px;background:#c4c0c8;}
#body {height:150px;text-align:left;padding:10px 10px;}
#bottom {height:30px;padding:2px}
#input {top:0px;bottom:0px;}
–>
</style>
</head>
<body>
<div id="outbox">
<div id="title">正在进行通行证操作</div>
<div id="body">
<p>正在进行远程数据同步，请勿刷新页面！</p>
<ul>
<li id="api">论坛数据同步中</li>
<li id="powereasy">本站操作已完成！</li>
</ul>
</div>
<div id="bottom">
<input onclick="location.href='index.asp'" id="confirm" type="button" value="点击返回" style="display:none" />
</div>
</div>
<script type="text/javascript" language="JavaScript"> document.getElementById("api").innerHTML = "通行证操作成功!"; document.getElementById("confirm").removeAttribute("style");</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动易远程接口中转</title>
<style type="text/css">
<!–
body {margin:0px;background:#ccc;height:auto;font: 9pt Tahoma;text-align:center;color: #000;}
#outbox {position:absolute;z-index:888;top:50%;left:50%;margin:-120px 0 0 -200px;width:400px;height:auto;background:#D4D0C8;border:1px solid #ccc;}
#title,#body,#bottom {border-top:1px solid #ddd;border-bottom:1px solid #999;border-right:1px solid #999;border-left:1px solid #ddd;}#title {line-height:28px;background:#c4c0c8;}
#body {height:150px;text-align:left;padding:10px 10px;}
#bottom {height:30px;padding:2px}
#input {top:0px;bottom:0px;}
–>
</style>
</head>
<body>
<div id="outbox">
<div id="title">正在进行通行证操作</div>
<div id="body">
<p>正在进行远程数据同步，请勿刷新页面！</p>
<ul>
<li id="api">论坛数据同步中</li>
<li id="powereasy">本站操作已完成！</li>
</ul>
</div>
<div id="bottom">
<input onclick="location.href='index.asp'" id="confirm" type="button" value="点击返回" style="display:none" />
</div>
</div>
<script type="text/javascript" language="JavaScript"> document.getElementById("api").innerHTML = "通行证操作成功!"; document.getElementById("confirm").removeAttribute("style");</script>
</body>
</html>
本文基于署名 2.5 中国大陆许可协议发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名小李刀刀（包含链接）。如您有任何疑问或者授权方面的协商，请给我发送邮件。
最新评论