1.垂直居中

有时我们会使用margin: 0 auto;作居中使用。但有的时候我们需要垂直居中,例如在div里面垂直居中显示一张加载中的gif图。

下面这种写法就可以完美实现:

垂直居中的子容器  {
position: absolute;
left:;
right:;
top:;
bottom:;
margin: auto; width:80px;
height:80px;
}

CSS之绝对定位那些事的更多相关文章

  1. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  2. css水平居中那点事

    昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...

  3. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  4. cordova 导致css中绝对定位top:0会被顶到视图之外

    IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...

  5. css基础—字体那些事

    css基础-字体那些事 1. 首先讲字的大小样式等 字体大小 font-size: 40px; 文字字体 font-family: "宋体",Arial; 文字样式 font-st ...

  6. CSS的绝对定位和相对定位

    css定位标签position包括两个值:relative(相对定位)和absolute(绝对定位),position样式一般都是和top.bottom.left.right一起使用来确定一个标签的位 ...

  7. css的绝对定位

    假设绝对定位的元素的id为absoluteDiv. 当包含absoluteDiv的块中没有设置position:relative时, absoluteDiv会相对于浏览器(window.top)定位. ...

  8. CSS中绝对定位依据谁进行定位?

    结论 绝对定位的top等的依据元素需满足3个条件: 已定位(position:relative/fixed/absolute) 最近的 祖辈元素(一定是祖辈元素不是同辈元素) 说明 一般会为body设 ...

  9. CSS:绝对定位布局案例 position布局实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. javaScript数据类型与typeof操作符

    1,typeof操作符. typeof操作符是用来检测变量的数据类型.使用:typeof  变量名;返回以下字符串: 字符串 描述 undefined 未定义 boolean 布尔值 string 字 ...

  2. Contractive Auto-Encoder

    本博客已经迁往http://www.kemaswill.com/, 博客园这边也会继续更新, 欢迎关注~ Contractive Autoencoder(CAE)是Bengio等人在2011年提出的一 ...

  3. HttpListenerCS客户端监听http

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. 当碰到unix纪元问题时strtotime怎么转时间戳(DateTime类的使用方法)

    UNIX纪元时间又称POSIX时间/新纪元时间(Epoch Time):从协调世界时1970年1月1日0时0分0秒起到现在的总秒数,不包括闰秒.正值表示1970以後,负值则表示1970年以前. Uni ...

  5. coreseek 提示 client version is higher than daemon version 解决办法

    安装好coreseek,开启了服务之后,通过 sphinx php扩展去请求数据,提示:client version is higher than daemon version (client is ...

  6. 实战android菜单项之XML加载菜单与动态菜单项[转]

    原文地址:http://blog.csdn.net/kaiwii/article/details/7767225 自定义android应用程序的菜单项首先要知道切入点.经过学习,知道主要是两个Acti ...

  7. C float与char数组 互转

    //转换float数据到字节数组 unsigned char i; float floatVariable; unsigned ]; (unsigned char) *pdata = ((unsign ...

  8. rabbitmq使用dead letter机制来进行retry

    首先建立 工作exchange和工作queue,指定工作队列的x-dead-letter-exchange到重试exchenge var workQueueArgs = new Dictionary& ...

  9. STM32L051 PVD的调试

    我的PVD的驱动以及例程位于STM32L0xx_Drivers这个库当中,在使用前最好先阅读readme.md文件 PVD 是一种检测MCU供电情况的技术.当供电电压高于或者低于一定阈值的时候,可以在 ...

  10. 标志数在wordcount程序中的应用与拓展

    wordcount程序要求测出文本中的单词数,字符数和行数. 设计思路: 将文件读入,逐字检测,检测到空格单词数加一,检测到回车行数单词数加一,如果既不是回车也不是空格则说明是字符,字符数加一 编程时 ...