CSS:实现某个div在网页中垂直水平居中

来源：互联网发布：java sql select行数编辑：程序博客网时间：2024/05/01 13:48

实现需求的关键在找到当前页面大小的中轴,也就是上: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盒子和当前页面的中轴会合二为一,需求也就实现了.