效果圖：

HTML代碼如下：

 1 <div id="container">
 2         <div class="login">
 3             <div class="logo">LOGO</div>
 4             <form action="" method="post" >
 5                 <div class="public-input">
 6                     <input class="username has-border"
 
 name="username" type="text" placeholder="請輸入用戶名">
 7                 </div>
 8                 <div class="public-input ">
 9                     <input class="password has-border" name="password" type="password" placeholder="請輸入密碼">
10                 </div>
11                 <
 
div class="btnLogin public-input">登錄</div>
12                 <div class="register">
13                     <input type="checkbox"  checked>
14                     <label for="remember-me">記住密碼</label>
15                 </div>
16             </form>
17
 
         </div>
18     </div>

CSS代碼如下：

 1 html,body,div,form,input,span,a{
 2     padding: 0;
 3     margin: 0;
 4 }
 5 body{
 6     background: url(‘../images/bg.png‘);
 7     font-size: 0.75em;
 8     background-color: #3bc0c3;
 9 }
10 #container{
11     /*width: 440px;*/
12     width: 33%;
13     height: 310px;
14     border: 5px solid #32a3a6;
15     position: absolute;
16 }
17 #container .logo{
18     width: 100%;
19     height: 55px;
20     background: #f8fbfb;
21     text-align: center;
22     line-height: 55px;
23     font-size: 18px;
24     font-weight: bold;
25     color: #484848;
26     border-bottom: 1px solid #eff4f4;
27 }
28 #container form{
29     width: 81.818181812%;
30     margin: 20px auto;
31     color: #e2e2e2;
32 }
33 #container .public-input{
34     width: 100%;
35     height: 40px;
36     border: 1px solid #e2e2e2;
37     margin-bottom: 20px;
38     overflow: hidden;
39 }
40 #container form input[type="text"],
41 #container form input[type="password"]{
42     width: 90%;
43     height: 100%;
44     border: none;
45 }
46 #container .username{
47     background: url("../images/userpw-icon.png") no-repeat center left;
48     background-position: 3px 8px;
49     background-color: #fff;
50 }
51 #container form input[name="username"]{
52     padding-left: 38px;
53 }
54 #container .password{
55     background: url("../images/userpw-icon.png") no-repeat center left;
56     background-position: 3px -54px;
57     background-color: #fff;
58 }
59 #container form input[name="password"]{
60     padding-left: 38px;
61 }
62 #container .public-input input.has-border:focus{
63   border-color: #484848;
64   box-shadow: 0 0 10px #484848;
65   -webkit-box-shadow: 0 0 10px #484848;
66   -moz-box-shadow: 0 0 10px #484848;
67 }
68 #container .btnLogin{
69     border: none;
70     background: #3bc0c3;
71     text-align: center;
72     line-height: 40px;
73     font-size: 18px;
74     font-weight: bold;
75     color: #fff;
76     cursor: pointer;
77     border-radius: 5px;
78     -webkit-border-radius: 5px;
79     -moz-border-radius: 5px;
80 }
81 #container .register input{
82     vertical-align:middle;
83     margin-bottom: 6px;
84 }

JS：

 1 window.onload=function(){
 2     var box_hight;  
 3     var box_width; 
 4     var con=document.getElementById("container");
 5     
 6     //位置賦值
 7     con.style.left="50%";
 8     con.style.top="50%";
 9     box_width=con.offsetWidth;  //獲取盒子寬度
10     box_hight=con.offsetHeight;  //獲取盒子高度
11     con.style.marginTop=-box_hight/2+"px";
12     con.style.marginLeft=-box_width/2+"px";
13 }

JS實現居中漂亮的登錄頁面