1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         .box {
  11.             width: 600px;
  12.             height: 600px;
  13.             background: blue;
  14.             position: relative
  15.         }
  16.  
  17.         .div1 {
  18.             /* width: 200px;
  19.             height: 200px; */
  20.             background: red;
  21.             position: absolute;
  22.             top: 0;
  23.             bottom: 0;
  24.             left: 0;
  25.             right: 0;
  26.             margin: auto
  27.         }
  28.     </style>
  29. </head>
  30.  
  31. <body>
  32.     <div class="box">
  33.         <div class="div1"></div>
  34.     </div>
  35.  
  36. </body>
  37.  
  38. </html>

    left:0;right:0;top:0;bottom:0;再加上margin：auto，会使div1居中，如果div1,没有宽高，则会继承父集的宽高。适合body 内的遮罩，

top:0;bottom:0;left:0;right:0;同时使用的效果的更多相关文章

  1. css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  2. Linux下Oracle 10.2.0.1升级到10.2.0.4总结

    最近部署测试环境时,将测试环境ORACLE数据库从10.2.0.1升级到了10.2.0.4,顺便整理记录一下升级过程. 实验环境: 操作系统:Oracle Linux Server release 5 ...

  3. win10安装oracle 11g 报错 要求的结果: 5.0,5.1,5.2,6.0 6.1 之一 实际结果: 6.2

    Windows10下安装Oracle11G.10G,都会提示如下信息 正在检查操作系统要求... 要求的结果: 5.0,5.1,5.2,6.0 之一 实际结果: 6.1 检查完成.此次检查的总体结果为 ...

  4. win10 用cmake 3.5.2 和 vs 2015 update1 编译 GPU版本(cuda 8.0, cudnn v5 for cuda 8.0)

    win10 用cmake 3.5.2 和 vs 2015 update1 编译 GPU版本(cuda 8.0, cudnn v5 for cuda 8.0)  用vs 2015打开 编译Release ...

  5. CMS .NET 程序框架 从2.0/3.5升级到4.0 版本后 需要调整的地方

    问题一: document.forms1.action 不可使用 需要修改程 document.forms[0] .NET 程序框架 从2.0/3.5升级到4.0 版本后,document.forms ...

  6. php4.3.4.4、apache2.0.4.8、mysql 4.0.26、window7 配置过程

    apache的安装不需要过程,直接默认安装,下一步 下一步就Ok了. php4的安装: 1 将php-4.0.4-Win32.zip(最新版本4.0.4)解压缩到硬盘的一个目录中,例如解压到E:php ...

  7. Microsoft.Jet.OLEDB.4.0和Microsoft.ACE.OLEDB.12.0的区别

    Microsoft.Jet.OLEDB.4.0和Microsoft.ACE.OLEDB.12.0的区别 时间 2012-12-19 20:30:12  CSDN博客原文  http://blog.cs ...

  8. (转载) .NET2.0程序集无法在.net 4.0 中运行的解决方案

    首先在MSDN上看到 4.0 的更新日志中有如下这条: .NET Framework 4 不能自动使用自己的公共语言运行时版本来运行由 .NET Framework 早期版本生成的应用程序. 若要使用 ...

  9. CentOS7.0分布式安装HADOOP 2.6.0笔记-转载的

    三台虚拟机,IP地址通过路由器静态DHCP分配 (这样就无需设置host了). 三台机器信息如下 -      1. hadoop-a: 192.168.0.20  #master     2. ha ...

随机推荐

  1. Docker镜像构建原理解析(不装docker也能构建镜像)

    在devops流程里面 构建镜像是一个非常重要的过程,一般构建镜像是写dockerfile文件然后通过docker client来构建的image. docker client 会先检查本地有没有im ...

  2. eureka server 配置

    启动类 import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure. ...

  3. 200-Java语言基础-Java编程入门-004 | Java分支与循环

    一.流程控制语句 可以控制程序的执行流程 在程序开发的过程之中一共会存在有三种程序逻辑:顺序结构.条件分支(选择)结构.循环结构. 顺序结构的定义,即:所有的程序将按照定义的代码从上往下.顺序依次执行 ...

  4. rest framework Views

    基于类的意见 Django的基于类的意见是从旧式的观点颇受欢迎. - Reinout面包车里斯 REST框架提供了一个APIView类,它的子类Django的View类. APIView类是从正规不同 ...

  5. WPF 基础 - Binding 的 数据更新提醒

    WPF 作为一个专门的展示层技术,让程序员专注于逻辑层,让展示层永远处于逻辑层的从属地位: 这主要因为有 DataBinding 和配套的 Dependency Property 和 DataTemp ...

  6. Python装饰器（2）

    上一篇介绍了装饰器的常规使用方法,即函数形式的装饰器.这篇文章中,进一步介绍类class跟装饰器的相关知识. [用装饰器来装饰类函数] 这是今天介绍的第一种使用场景,比较常见.因为目前好多的编程语言都 ...

  7. 某SQL注入--报错注入payload

    1.证明存在sql注入,根据这个报错语句,,有'  有% 2.payload  闭合语句 %' or (select extractvalue("anything",concat( ...

  8. css实现一个电影卡片

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  9. springMVC:校验框架:多规则校验,嵌套校验,分组校验;ssm整合技术

    知识点梳理 课堂讲义 学习目标 能够阐述表单验证的分类和区别 能够运用表单验证的常用注解 能够编写表单验证的示例 能够编写SSM整合的应用案例 能够总结SSM整合的步骤 1 校验框架 1.1 入门-视 ...

  10. 使用oracle序列+oracle定时任务获取每月从1开始的流水码

    --创建序列 --入库create sequence rk_seq;--出库create sequence ck_seq;--移库create sequence yk_seq; --创建存储过程 cr ...