HTML

CSS 解说,水平居中就不用多说了,给div.login_wrap设置个宽度,然后margin:0 auto;就可以做到。但是这里这样做,这里使用了两层div 外层使用margin:0 auto;先做到外层水平居中,然后里面一个div使用绝对定位,代码分别如下。

html, body{height: 100%;margin: 0px;padding: 0px; min-width: 1200px;}

.login_wrap{width:960px;height:inherit;position:relative;margin:0 auto;}

.login_box{width: 400px; background-color: rgba(0,0,0,0.3);height:400px;position:absolute;left:50%;top:50%;margin:-200px 0 0 -200px;}

效果

关于html和body高度 登录页面登录框永远保持在页面垂直水平居中位置的更多相关文章

  1. Servlet页面登录的数据库验证程序(二)

    这个程序在原来的程序基础上加入了密码验证. 一.增加一个error.jsp页面,用于跳转出现用户名和密码错误显示信息. <%@ page language="java" im ...

  2. 实现手机扫描二维码页面登录,类似web微信-第三篇,手机客户端

    转自:http://www.cnblogs.com/fengyun99/p/3541254.html 上一篇,介绍了二维码生成的机制,紧接着,我们就要开发手机客户端来识别这个二维码. 二维码,实际上是 ...

  3. 实现手机扫描二维码页面登录,类似web微信-第一篇,业务分析

    转自:http://www.cnblogs.com/fengyun99/p/3541249.html 关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描 ...

  4. iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能

    emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面 ...

  5. dede织梦后台-退出空白,注销空白,打开空白,登录返回首页,登录返回登录页面

    24.php 5.4版本 后台500错误,打开空白的问题 不兼容 登录时空白 后台空白 24-1./include/userlogin.class.php 今天把电脑上的phpStudy升级到2013 ...

  6. Django实战(一)-----用户登录与注册系统3(前端页面、登录视图)

    基本框架搭建好了后,我们就要开始丰富页面内容了.最起码,得有一个用户登录的表单不是么?(注册的事情我们先放一边.) 一. 原生HTML页面 删除原来的login.html文件中的内容,写入下面的代码: ...

  7. Flask【第4篇】:用Flask的扩展实现的简单的页面登录

    用flask的扩展实现的简单的页面登录 from flask import Flask,render_template,request,redirect,session app = Flask(__n ...

  8. Luffy /4/ 多方式登录接口&登录注册前端页面

    目录 Luffy /4/ 多方式登录接口&登录注册前端页面 腾讯云短信 登录注册前端页面 如何实现点击登录或图片进行跳转 登录注册前端页面实现 Login.vue Register.vue H ...

  9. 钉钉登录二维码嵌套在vue页面中

    转自 https://www.csdn.net/tags/OtDacg3sMjQ2NTgtYmxvZwO0O0OO0O0O.html 钉钉登录二维码嵌套在vue页面中 2021-09-04 14:42 ...

随机推荐

  1. opengl截图

    int GetEncoderClsid(const WCHAR* format, CLSID* pClsid) { UINT num = ; // number of image encoders U ...

  2. php延迟加载的示例

    class a{ ; ; //public $d = 5; public function aa(){ echo self::$b; } public function cc(){ echo stat ...

  3. MySQL5.6 ALTER TABLE 分析和测试

    在MySQL5.5和之前版本,在运行的生产环境对大表(超过数百万纪录)执行Alter操作是一件很困难的事情.因为将重建表和锁表,影响用户者的使用.因此知道Alter操作何时结束对我们是非常重要的.甚至 ...

  4. bootstrap-datetimepicker在经过GC(Google Closure Compiler)压缩后无法使用的解决方案

    将压缩级别由simple改成whitespace 问题就是这样之后压缩后的文件大了很多 <?xml version="1.0"?> <project name=& ...

  5. EasyDarwin返回401 Unauthorized解决方法

    在向EsayDarwin发起 RTSP DESCRIBE请求或者ANNOUNCE推送时,EasyDarwin会返回401 Unauthorized: 原因:在EasyDarwin的RTSP Sessi ...

  6. T-SQL:SQL Server-数据开发(经典)

    ylbtech-SQL Server-Doc-Help:SQL Server-数据开发(经典) SQL Server 数据开发(经典). 1,数据开发(经典) 返回顶部 1.按姓氏笔画排序: Sele ...

  7. [转]linux之more命令

    转自:http://www.cnblogs.com/peida/archive/2012/11/02/2750588.html more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示 ...

  8. Linux 下部署单机 hadoop 测试

    最终运行结果展示: 格式化namenode. 开始测试 显示测试进程 浏览器查看效果展示:(虽然还不清楚是什么意思,但是能看到这个效果已经很开心了) 话不多说,进入主题: 1. 安装 VMwareSt ...

  9. 【JNI】OPUS压缩与解压的JNI调用(.DLL版本)

    OPUS压缩与解压的JNI调用(.DLL版本) 一.写在开头: 理论上讲,这是我在博客园的第一篇原创的博客,之前也一直想找个地方写点东西,把最近做的一些东西归纳总结下,但是一般工程做完了一高兴就把东西 ...

  10. python中使用多继承

    python中使用多继承,会涉及到查找顺序(MRO).重复调用(钻石继承,也叫菱形继承问题)等 MRO MRO即method resolution order,用于判断子类调用的属性来自于哪个父类.在 ...