垂直居中——登錄界面

本文轉載自查看原文 2017-03-27 14:13 1607 css

彈性盒子垂直居中：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;

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS 垂直居中 TextView 垂直居中 flutter TextField垂直居中 html--垂直居中 css圖片垂直居中 css 帶換行的垂直居中用絕對定位實現垂直居中 span 文字垂直居中 bootstrap modal垂直居中水平居中和垂直居中