垂直居中——登录界面

弹性盒子垂直居中：body直接display：flex不行中间在来一层。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 6 <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 7 </script>
 8 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 <style>
10     body{
11     background: url(back01.jpg) center center no-repeat;
12     background-attachment: fixed;
13     background-size: 100% 100%;
14     background-color: pink;
15     }
16     .full-screen{
17      position: absolute;
18      /*background:#ff2;*/
19      width:100%;
20      height:100%;
21      display: flex;
22      justify-content: center;
23      align-items: center; 
24     }
25     .pc-center{
26     background: url(loginwin.png) center center no-repeat;
27     background-size: 100% 100%; 
28     width: 593px;
29     height: 490px;
30     /*width: 764px;
31     height: 631px;*/
32     /*margin: 0 auto;
33     margin-top: 192px;*/
34     padding: 50px
35     }
36     h2{
37     color: #fff;
38     text-align: center;
39     margin-bottom: 39px;
40     font-size: 27px;
41     }
42     .control-label{
43         color: #fff;
44     }
45 </style>
46 
47 </head>
48 <body>
49 <div class="full-screen">
50 <div class="pc-center">
51     <div class="warp-center">
52         <h2>雅培经销商订单录入系统</h2>
53         <form class="form-horizontal" role="form">
54             <div class="form-group">
55                 <label for="firstname" class="col-sm-2 control-label">用户名</label>
56                 <div class="col-sm-8">
57                     <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
58                 </div>
59             </div>
60             <div class="form-group">
61                 <label for="lastname" class="col-sm-2 control-label">密码</label>
62                 <div class="col-sm-8">
63                     <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
64                 </div>
65             </div>
66         </form>
67     </div>
68     <div class="logo"></div>
69 </div>
70 </div>
71 </body>
72 </html>

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content:center;
justify-content: center;
-webkit-align-items:center;
align-items:center;

posted on 2017-03-27 14:13  技术V类  阅读(2174)  评论(0)  编辑  收藏  举报

导航