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. [Z] 关于c++ typename的另一种用法

    在看c++ primer的时候见到了一下这种用法: typedef typename std::vector<int>::size_type size_type; 觉得这里面的typena ...

  2. .net 操作 sqlite

    sqlite 表结构和数据的导出 全部导出 sqlite3 data.db >.output dd.sql >.dump 待续

  3. Unity3d导出Android的apk文件时相关问题的解决办法

    今天上午着手将一个unity3d开发的小游戏build到android手机上运行,结果遇到了不少问题. 首先遇到的第一个问题是在build到一半的时候,弹出如下报错: Error building P ...

  4. HP P1008打印机如何打印特殊纸张

    一.问题的提出 HP P1008中间有一个进纸槽,这是干什么的? 二.问题的分析 查说明,说这个进纸槽是叫做优先进纸槽,用于各种非常规的纸张的打印. 三.问题的解决 弄一张特殊尺寸的纸张,打开要编辑的 ...

  5. [转]MySQL与MongoDB的操作对比

    MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoDB则是非关系型数据库,也叫文档型数据库,是一种NoSQL的数据库.它们各有各的优点,关键是看用在什么地方 ...

  6. 什么是作用域链,什么是原型链,它们的区别,在js中它们具体指什么?

    什么是作用域链,什么是原型链. 作用域是针对变量的,比如我们创建了一个函数,函数里面又包含了一个函数,那么现在就有三个作用域 全局作用域==>函数1作用域==>函数2作用域 作用域的特点就 ...

  7. 2014 网选 5011 Game(Nim游戏,数学题)

    /* 题意:Nim游戏! 思路:通过异或,判断将n个数表示成二进制的形式之后,是否对应位的数字1 的个数是偶数! */ #include<iostream> using namespace ...

  8. 后端码农谈前端(HTML篇)第二课:常见元素

    一.根元素 <doctype> 定义文档类型. <html> 定义 HTML 文档. 二.元数据元素 <head> 定义关于文档的信息. <meta> ...

  9. perl基本语法--转载

    http://www.cnblogs.com/zhtxwd/archive/2012/03/06/2381585.html 本文介绍从变量类型.操作运算符.控制叙述.子程序.I/O和档案处理. Reg ...

  10. Node.js Web 开发框架大全《静态文件服务器篇》

    这篇文章与大家分享优秀的 Node.js 静态服务器模块.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编写能 ...