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. Microsoft 2013 新技术学习笔记 三

    什么是代码结构的组织?asp.net MVC 5 默认创建出的几个目录的标准含义分别如下: Controllers目录存放MVC模式中的Controler Models目录存放MVC模式中的Model ...

  2. VC6.0 error LNK2001: unresolved external symbol _main解决办法

    学习VC++时经常会遇到链接错误LNK2001,该错误非常讨厌,因为对于编程者来说,最好改的错误莫过于编译错误,而一般说来发生连接错误时,编译都已通过.产生连接错误的原因非常多,尤其LNK2001错误 ...

  3. 十四、EnterpriseFrameWork框架核心类库之简易ORM

    在写本章前先去网上找了一下关于ORM的相关资料,以为本章做准备,发现很多东西今天才了解,所以在这里也对ORM做不了太深入的分析,但还是浅谈一下EFW框架中的设计的简易ORM:文中有一点讲得很有道理,D ...

  4. HTML注释引起的问题

    因为规范要求需要对页面进行说明,添加作者等信息,所以在cshtml的代码中添加了html注释,包括之前使用jsp也是这样做的: 在页面布局的时候,需要对高度进行动态计算,IE8以上没有问题,主要是在I ...

  5. hdu 2152

    题目大意:本题是中文题.读者可以直接到OJ上去阅读.提议并不难理解 代码如下: /* * 2152_1.cpp * * Created on: 2013年8月9日 * Author: Administ ...

  6. php分享三十三:常量

    一:常量定义 1:在脚本执行期间该值不能改变(除了所谓的魔术常量,它们其实不是常量) 2:常量默认为大小写敏感 3:命名规则:用正则表达式是这样表达的:[a-zA-Z_\x7f-\xff][a-zA- ...

  7. SQL中对XML的处理

    DECLARE  @PreSOMasterXML XMLDECLARE   @SDA VARCHAR(100)SET @PreSOMasterXML=N'<ProcessTaskRequest& ...

  8. 创建一个带模版的用户控件 V.3

    再重构此篇<创建一个带模版的用户控件  V.2>http://www.cnblogs.com/insus/p/4164149.html 让其它动态实现header,Item和Footer. ...

  9. jQuery中的动画与特效

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...

  10. ASP.NET MVC4 传递Model到View

    原文发表在:http://www.star110.com/Note/ReadArticle/60641215331146140043.html 开发环境:.NET MVC4 + EF6.0 模型: 1 ...