现在遮罩层使用的越来越多，因此，当元素定位之后如何在页面居中是首先要解决的问题。
以div元素绝对定位为例：
div{width:500px;height:400px;position：absolute;top:50%;left:50%;}
div是以左上角o点距上50%距左边50%，此时div在页面显示的位置----->如图中红色矩形
右图可知元素在上移自身高度的的一半，左移自身宽度的一半即可居中。用百分比设置width和height，也可以使用该方法。
div{margin:-200px 0 0 -250px;}
实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绑定账号</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="login-mask.css"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="loginbox">
<div class="mask"></div>
<div class="login">
<img src="image/background.png">
<div class="midden">
<p>登陆账号</p>
<div class="mink">
<span class="icon-intruder">账号</span>
<input type="username"/>
</div>
<div class="mink" id="bottom_in">
<span class="icon-loginPW">密码</span>
<input type="password"/>
</div>
<div class="quer">确认绑定</div>-->
</div>
</div>
</div>
</body>
</html>
body,div,p,span,input{
margin: 0;
padding: 0;
border:0;
}
.loginbox{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1000;
}
/*遮罩层*/
.mask {
width:100%;
height:100%;
background-color:#AAA;
opacity:0.5;
}
/*内部内容*/
.login {
width:80%;
height:300px;
color:#fff;
position:fixed;
top:50%;
left:50%;
margin:-150px 0 0 -40%;
}
.login img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.midden{
position:relative;
top:0;
left:0;
z-index:100;
}
.midden p {
width:100%;
font-weight:bolder;
color:red;
font-size:20px;
text-align:center;
margin-top:30px;
}
.mink {
width:80%;
margin:20px auto 18px;
overflow:hidden;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border:2px solid #e24740
}
.mink span {
width:25%;
background-color:#E24740;
float:left;
font-size:15px;
font-weight:bold;
padding:7px 2px 7px 5px
}
input{
width:71%;
height:95%;
float:left;
padding:5px 0;
outline:none;
font-size: 15px;
}
input:-webkit-autofill{
-webkit-box-shadow:0 0 0 1000px #fff inset;
}
.quer {
width:80%;
text-align:center;
background-color:#E24740;
margin:30px auto;
padding:7px 0;
font-size:1em;
color:white;
font-weight:bold;
border-radius:5px;
border:2px solid #E24740;
}
其中input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;}是为了解决input在chrome显示背景图颜色变黄。这个属性是chrome的私有属性。
时间： 2024-10-05 15:33:06