首页 > 代码库 > javascript 垂直居中div
javascript 垂直居中div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>归属地查询</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body {
background-color: #F1F1F1;
}
.txt{
text-align: center;
font-family: "微软雅黑";
font-weight: bold;
font-size: 24px;
color: #3E6C99;
}
.main{
width: 650px;
height: 320px;
margin-left:auto;
margin-right:auto;
}
.left {
float: left;
width: 325px;
height: 320px;
line-height:320px;
}
.login {
float: left;
width: 325px;
height: 320px;
border-radius:5px;
/*box-shadow:3px 3px 20px rgba(0,0,0,0.7);*/
vertical-align: middle;
}
.login_row {
width: 315px;
height: 40px;
line-height:40px;
margin-top: 10px;
font-family: "微软雅黑";
margin-left: 10px;
}
.button {
width: 80px;
line-height: 25px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
border:1px solid #1e7db9;
box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
background: -webkit-linear-gradient(top,#42a4e0,#3E6C99);
background: -moz-linear-gradient(top,#42a4e0,#3E6C99);
background: linear-gradient(top,#42a4e0,#3E6C99);
}
input {
height: 25px;
border-radius: 3px;
border: 1px solid #A1A1A1;
top:20px ;
}
img {
height: 25px;
width: 60px;
position: relative;
/*left: 30px;*/
top: 7px
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<script type="text/javascript">
function img() {
var img = document.getElementById("img");
alert("aaa");
}
function load() {
verticalCenters();
// 窗口大小改变事件
window.onresize = function(){verticalCenters();};
}
// 垂直居中
function verticalCenters(){
var height = Number(window.innerHeight);
var main = document.getElementById("main");
var top = (height-320)/2;
if(top > 0) {
main.style.marginTop = top + "px";
} else {
main.style.marginTop = "0px";
}
}
</script>
</head>
<body onl oad="load()">
<div class="main" id="main">
<div class="left">
<div class="txt">手机号归属地管理系统</div>
</div>
<div class="login">
<div class="login_row" style="margin-top: 50px;" >用户名：<input type="text" name="userName" /> </div>
<div class="login_row" >密 码：<input type="password" name="passWord" /></div>
<div class="login_row" >验证码：<input type="text" name="verification" id="verification" style="width: 70px;" /> <img id="img" src="http://www.mamicode.com/img/background.png" /><a href="http://www.mamicode.com/#" onclick="img()">看不清？</a> </div>
<div class="login_row" style="padding-left: 60px;"><input type="button" value="http://www.mamicode.com/登录" class="button" ></div>
</div>
</div>
</body>
</html>
javascript 垂直居中div