标签：
现在遮罩层使用的越来越多，因此，当元素定位之后如何在页面居中是首先要解决的问题。
以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的私有属性。
标签：
原文地址：http://www.cnblogs.com/zmr2520/p/5282597.html
