<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            width: 600px;

            height: 600px;

            background: blue;

            position: relative

        }

        .div1 {

            /* width: 200px;

            height: 200px; */

            background: red;

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="div1"></div>

    </div>

</body>

</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. 肝了很久，冰河整理出这份4万字的SpringCloud与SpringCloudAlibaba学习笔记！！

    写在前面 不少小伙伴让我整理下有关SpringCloud和SpringCloudAlibaba的知识点,经过3天的收集和整理,冰河整理出这份4万字的SpringCloud与SpringCloudAli ...

  2. 基于CefSharp开发浏览器（八）浏览器收藏夹栏

    一.前言 上一篇文章 基于CefSharp开发(七)浏览器收藏夹菜单 简单实现了部分收藏夹功能 如(添加文件夹.添加收藏.删除.右键菜单部分功能) 后续代码中对MTreeViewItem进行了扩展,增 ...

  3. 记一次Drone无法触发构建的问题

    问题 好巧不巧,当你晚上准备上线的时候,在下午临近下班的时候CI&CD工具出问题了,提交代码不能触发构建,不能上线了,Drone平台那边也下班了,正好CICD依赖的公司git仓库也出问题了(就 ...

  4. SpringMVC-03 RestFul和控制器

    SpringMVC-03 RestFul和控制器 控制器Controller 控制器复杂提供访问应用程序的行为,通常通过接口定义或注解定义两种方法实现. 控制器负责解析用户的请求并将其转换为一个模型. ...

  5. python带颜色打印字符串

    python带颜色打印字符串 之前调试pwn题的时候,有时候需要将某些特别的,重要的信息用不一样的颜色打印出来.查阅一些资料,了解了print函数的特性后,自己写了一个脚本,可以用来获取带颜色信息的字 ...

  6. rest framework ViewSet

    ViewSets 路由选择确定要用于一个请求哪个控制器之后,控制器负责做出请求的感并产生相应的输出. - Ruby on Rails的文档 Django的REST框架允许你的逻辑一组在一个类中的相关意 ...

  7. 安装JDK9，jemter无法正常启动，怎么退回到JDK8

    安装JDK8,配置环境变量 java -version显示的是8.1 然后安装JDK9之后,java -version显示的是9+8.1 这个时候,无法正常启动jemter 在环境变量中把path的C ...

  8. css实现京东顶部导航条

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

  9. python-链队列的实现

    7 class Node(object): 8 def __init__(self,data): 9 self.data = data 10 self.next = None 11 12 class ...

  10. Salesforce LWC学习(三十二)实现上传 Excel解析其内容

    本篇参考:salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容 上一篇我们写了aura方式上传excel解析其内容.lwc作为salesforce的新宠儿,逐渐的 ...