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. unity3d 本地数据存储

    using UnityEngine; using System.Collections; //路径工具类 public class PathKit { /** 后缀常量字符 */ public con ...

  2. android html 与webview属性从冲突

    在最近的项目开发中,使用webview加载html页面,这样可以节省大量页面开发的时间,同时也可加快项目进度. 我们需求是需要显示商品评论,页面设计如下: 调用android代码,对于webview的 ...

  3. mac vim 使用

    再使用Mac编辑文件时感觉非常不爽,没有语法高亮,只能通过设置改变所有字体为同一个颜色,看起来还是别扭, 于是找到方法使用vim时可以实现语法高亮显示,操作步骤如下: 1.进入/usr/share/v ...

  4. Go语言实现HashSet

    set.go // set project set.go package set type Set interface { Add(e interface{}) bool Remove(e inter ...

  5. Web API 入门系列- 从一个示例开始

    1.新建Web API项目 2.新建bookModel 3.新建book web api 控制器 为了简单方便,演示系统使用内存集合持久化书籍. 4.测试web api 我们怎么方便测试web api ...

  6. MVC3.0学习笔记之元模型元数据ModelMetaData以及模型元数据提供系统

    模型元数据ModelMetaData是MVC中很重要的概念,它包括但不仅限于 模型的类型,模型包含了哪些属性,属性都是什么类型的,属性上都有什么特性. ASP.NET MVC3.0 提供了默认的模型元 ...

  7. 在ASP.NET开发中容易忽略的2个小问题

    本文地址:http://www.cnblogs.com/outtamyhead/p/3642729.html,转载需保留本地址. 最近在我的MVC项目中出现了两个非常小,但是往往惹出大麻烦的问题,借中 ...

  8. JS手动触发事件,转载

    1. createEvent(eventType)参数:eventType 共5种类型:    Events :包括所有的事件.           HTMLEvents:包括 'abort', 'b ...

  9. 扁平化设计的最新趋势 – 长阴影(Long Shadow)

    随着互联网的发展,网页设计变得越来越复杂,如今设计的外观和感觉实现网站功能说使用的开发技术一样重要.互联网的功能远远不只是基本的信息共享,现在人们对网站的期望是远远大于几年前的. 如今,HTML5 & ...

  10. 记第二次使用php开发项目之绝不重复自己

    严格说起来,自己并非一个合格的php程序员.第一次使用php开发,不过是因为游戏上线,需要一个统计管理后台和GM后台,因为招聘已经来不及,所以我就上前线了! 凭着对php语法的一点点记忆(大学的时候学 ...