寥寥几行CSS:实现某个div在网页中垂直水平居中呢
2008-09-10 08:17
736 查看
昨天在一位仁兄的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盒子和当前页面的中轴会合二为一,需求也就实现了.
实现需求的关键在找到当前页面大小的中轴,也就是上: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盒子和当前页面的中轴会合二为一,需求也就实现了.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS:实现某个div在网页中垂直水平居中
- CSS实现DIV水平居中和上下垂直居中
- 采用CSS让DIV在网页中水平垂直居中
- CSS +Div水平垂直居中实现
- css实现图片在div中水平和垂直居中(但图片宽高要小于div宽高)
- 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
- css实现div的水平垂直居中方法
- DIV水平垂直居中css实现代码
- 纯css实现div中单行文字，多行文字，嵌套div垂直水平居中问题
- CSS实现div水平垂直居中
- 使用CSS实现div的水平和垂直居中
- html中div使用CSS实现水平/垂直居中的多种方式
- css实现div水平、垂直居中
- CSS实现DIV水平 垂直居中-1
- 用div+css实现水平垂直居中
- css实现div内图片的垂直、水平居中
- 3行Css实现div水平、垂直居中
- 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
- css div垂直水平居中实现
- 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）