<!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. android上实现0.5px线条

    转: android上实现0.5px线条 由于安卓手机无法识别border: 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现. 原 ...

  2. 译文《全新首发JDK 16全部新特性》

    封面:洛小汐 译者:潘潘 JDK 8 的新特性都还没摸透,JDK 16 的新特性就提着刀来了. 郑重申明: 第一次冒险翻译专业领域的文献,可想而知,效果特别糟糕.一般翻译文献特别是 技术专业领域 的内 ...

  3. CTF-杂项笔记

                01 赛题解答 (1)目标:了解modbus协议 (2)解题: 密文:666C61677B4533334237464438413342383431434139363939454 ...

  4. 死磕Spring之IoC篇 - Spring 应用上下文 ApplicationContext

    该系列文章是本人在学习 Spring 的过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring 源码分析 GitHub 地址 进行阅读 Spring 版本:5.1. ...

  5. 【java框架】MyBatis(7)--MyBatis注解开发

    1.MyBatis注解开发 1.1.Lombok的基本使用 Lombok是SpringBoot2.1.X版本与IDEA官方支持的一个插件,它是为简化POJO类中繁杂重复代码:geter/setter/ ...

  6. [WC2014]时空穿梭

    这才叫莫比乌斯反演题. 一.题目 点此看题 二.解法 也没有什么好的思路,我们不妨把暴力柿子写出来,我们想枚举直线,但是这道题不能枚举直线的斜率,所以就要用整数来表示直线,我们不妨枚举出发点和终止点的 ...

  7. 攻防世界 reverse 进阶 16-zorropub

    16.zorropub  nullcon-hackim-2016 (linux平台以后整理) https://github.com/ctfs/write-ups-2016/tree/master/nu ...

  8. java例题_40 字母字符串转数组后排序

    1 /*40 [程序 40 字符串排序] 输入一个字符串数组,按照字母表的降序对这些字符串进行排序. 2 题目:字符串排序. 3 */ 4 5 /*分析 6 * 1.从键盘得到一个纯字母的字符串 7 ...

  9. 多任务学习(MTL)在转化率预估上的应用

    今天主要和大家聊聊多任务学习在转化率预估上的应用. 多任务学习(Multi-task learning,MTL)是机器学习中的一个重要领域,其目标是利用多个学习任务中所包含的有用信息来帮助每个任务学习 ...

  10. [状压DP]关灯问题II

    关 灯 问 题 I I 关灯问题II 关灯问题II 题目描述 现有n盏灯,以及 m m m个按钮.每个按钮可以同时控制这 n n n盏灯--按下了第 i i i个按钮,对于所有的灯都有一个效果.按下i ...