昨天在一位仁兄的Blog上看到的!特写出来让大家看看:
实现需求的关键在找到当前页面大小的中轴,也就是上:50%,左:50%,这个坐标的点就是中轴了,可我们的层是有宽度和高度的呀.如果把一个固定宽和高的层放到这个中轴上,层一定不会是垂直和水平居中的,现在我们就让层的中轴和当前页面的大小的中轴合二为一,就可以实现需求了.
- <!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" />
- <script type="text/javascript" src="include/js/common.js"></script>
- <title>会员注册</title>
- <style type="text/css">
- <!--
- @import url("include/css/popmodel.css");
- -->
- </style>
- </head>
- <body>
- <div id="sitepage">
- <div id="recordlist">
- <form name="form2" method="post" action="validateform.asp?model=register">
- <dl>
- <dt><span id="userstatus">您的登陆帐号</span></dt>
- <dd>用户名: <input type="text" name="login_user" id="login_user" size="30" maxlength="16" /></dd>
- </dl>
- <dl>
- <dt><span id="passwordstatus">帐号所对应的密码</span></dt>
- <dd>密码: <input type="password" name="login_password" id="login_password" size="30" maxlength="20" /></dd>
- </dl>
- <dl>
- <dt><span id="mailstatus">帐号绑定的信箱</span></dt>
- <dd>信箱: <input type="text" name="login_mail" id="login_mail" size="30" /></dd>
- </dl>
- <label class="panel"><input type="submit" name="subbutton" value="注册" /></label>
- </form>
- </div>
- </div>
- </body>
- </html>
recordlist就是我们要让其水平垂直居中的哪个层,看popmodel.css吧
- body{margin:0;padding:0;}
- #sitepage{margin:auto;width:auto;height:auto;}
- #recordlist{position: absolute; width:420px; height:230px; left:50%; top:50%;margin-left:-250px; margin-top:-100px; border: 1px solid #ccc;}
- #recordlist dl{float:left;margin:0;padding-top:5px; width:400px;}
- #recordlist dl dt{float:left;margin:0;padding-left:10px;width:400px;height:30px;}
- #recordlist dl dd{float:left;margin:0;padding-left:10px;padding-top:5px;width:380px;height:25px;}
- #recordlist dl dd label{display:inline;margin:0;padding:0;width:auto;}
- #recordlist dl dt{font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000;}
- #recordlist dl dd{font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#666;}
注意margin-left:-250pxt 和margin-top:-100;代表recordlist盒子向左,向上移动盒子宽度,高度的一半.这样recordlist盒子和当前页面的中轴会合二为一,需求也就实现了.