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