垂直居中——登录界面

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

转载于:https://www.cnblogs.com/dlgood/p/6626468.html

垂直居中——登录界面相关推荐

Android UI布局—— 仿QQ登录界面
最近,有点空闲的时间就拿QQ登录界面来模仿练手,做了个简单的登录界面.界面一般般吧,不算很漂亮,现在拿出来分享,希望大家一起学习与进步.有什么不足之处,请各位大侠多多赐教,谢谢.这个界面涉及到Line ...
css实现超有趣的熊猫登录界面
利用css实现带有熊猫背景的登录界面,输入密码时熊猫会把输入框向上举起遮住眼睛效果图: <!DOCTYPE html> <html lang="zh">& ...
Xcode中使用自动布局实现简单登录界面
本文通过实现一个居中显示的登录界面来了解ios中的Auto Layout技术.最终效果图如下: Xcode故事板中的效果图如下: 用户名和用户名输入框使用水平的UIStackView包裹起来,密码也使 ...
用HTML和CSS写注册登录界面
一.结果演示注册界面: 登录界面: 二.主要代码展示 1.HTML部分 1.注册界面对于注册界面,可以将其划分为三个部分,分别为左边的"新用户注册",中间的主体部分,以及右边的 ...
web项目通用简易登录界面
效果展示代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
Java简单的用户登录界面+MySQL
1 概述一个简单的Swing登录界面,使用了简单的JDBC. 如图: 2 UI 2.1 主界面主界面使用了31网格布局+三个JPanel,中间的JPanel使用了22网格布局: import ja ...
linux系统一直循环登录界面,Ubuntu 14.04解决登录界面无限循环的方法
在Ubuntu下配置Android的环境时,想像在Windows中那样在终端中直接启动adb,以为Linux和Windows一样,将adb的路径添加到环境变量中,于是将adb的路径也export到/e ...
Pretty Login便携版：Windows 7登录界面修改器
Pretty Login是由chnable开发的一个美化小工具,用来辅助修改Widnows 7登陆界面的背景图片,除此之外,它也能定制欢迎界面上的文本.按钮样式,如设置阴影.半透明效果. 由于Wind ...
注册表----修改Win7登录界面
在进行操作前,需要准备好背景图片.对背景图片的要求有三点: (1)图片必须是JPG格式: (2)必须将图片命名为backgroundDefault; (3)图片的体积必须小于256KB. 按下[Win ...

垂直居中——登录界面

垂直居中——登录界面相关推荐

最新文章

热门文章