居中思想可以由很多方式实现,这篇文章采用absolute实现:由传统方式开始到absolute独立使用方式

方式一:传统方式,父容器relateive,子元素absolute,然后left:50%,再margin-left:-width/2

<div class="ago">
<div class="mid"></div>
</div> .ago{
width:400px;
height:200px;
background:#ccc;
position:relative;
}
.mid{
width:50px;
height:50px;
background:red;
position:absolute;
left:50%;
top:50%;
margin:-25px 0 0 -25px;
}

方式二:独立使用 absolute 一

<div class="nb">
&nbsp;<div class="middle"></div>
</div> .nb{
width:400px;
height:200px;
background:#ccc;
text-align:center;
overflow:hidden;
}
.middle{
display:inlineblock;
*display:inline;*zoom:;
width:50px;height:50px;
background:green;
position:absolute;
margin-left:-38px;
margin-top:75px;
}
/*思想:将内部元素转化成行内元素,再在要居中的元素前加个空格,相当一个行内元素,
然后将父元素text-align:center;把行内元素居中显示了
然后将要居中的元素absolute,由于独立使用absolute的跟性特性,它会脱离文档流,并紧跟在空格的后面
最后通过调整margin-left的值进行居中
*/

方式三:独立使用 absolute 二,也是我比较推崇方式,尤其是在移动端,各种方便,管它是高矮胖搜呢,就是通吃,自从学会这种方式,妈妈再也不用担心我的居中了。

<div class="db">
<div class="dm"></div>
</div> .db{
width:400px;
height:200px;
background:#ccc;
}
.dm{
width:50px;
height:50px;
background:pink;
position:absolute;
left:;right:;
top:;bottom:;
margin:auto;
} /*是不是很酷,我已完全不能自拔了*/

absolute之实现居中的三种方式的更多相关文章

  1. HTML5实现动画三种方式

    编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...

  2. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  3. 监视EntityFramework中的sql流转你需要知道的三种方式Log,SqlServerProfile, EFProfile

    大家在学习entityframework的时候,都知道那linq写的叫一个爽,再也不用区分不同RDMS的sql版本差异了,但是呢,高效率带来了差灵活性,我们 无法控制sql的生成策略,所以必须不要让自 ...

  4. iOS字体加载三种方式

    静态加载 动态加载 动态下载苹果提供的多种字体 其他 打印出当前所有可用的字体 检查某字体是否已经下载 这是一篇很简短的文章,介绍了 iOS 自定义字体加载的三种方式. 静态加载 这个可以说是最简单最 ...

  5. 0036 Java学习笔记-多线程-创建线程的三种方式

    创建线程 创建线程的三种方式: 继承java.lang.Thread 实现java.lang.Runnable接口 实现java.util.concurrent.Callable接口 所有的线程对象都 ...

  6. 【整理】Linux下中文检索引擎coreseek4安装,以及PHP使用sphinx的三种方式(sphinxapi,sphinx的php扩展,SphinxSe作为mysql存储引擎)

          一,软件准备 coreseek4.1 (包含coreseek测试版和mmseg最新版本,以及测试数据包[内置中文分词与搜索.单字切分.mysql数据源.python数据源.RT实时索引等测 ...

  7. JDBC的批处理操作三种方式 pstmt.addBatch()

    package lavasoft.jdbctest; import lavasoft.common.DBToolkit; import java.sql.Connection; import java ...

  8. 【Java EE 学习 52】【Spring学习第四天】【Spring与JDBC】【JdbcTemplate创建的三种方式】【Spring事务管理】【事务中使用dbutils则回滚失败!!!??】

    一.JDBC编程特点 静态代码+动态变量=JDBC编程. 静态代码:比如所有的数据库连接池 都实现了DataSource接口,都实现了Connection接口. 动态变量:用户名.密码.连接的数据库. ...

  9. Java设置session超时(失效)的三种方式

    1. 在web容器中设置(此处以tomcat为例) 在tomcat-6.0\conf\web.xml中设置,以下是tomcat 6.0中的默认配置: <!-- ================= ...

随机推荐

  1. javascript的类和构造函数

    在javascript中,类的实现是基于其原型继承机制的.如果两个实例都从同一个原型对象上继承了属性,我们就说它们是同一个类的实例.那么,如果两个对象继承自同一个原型,那基本上可以认为它们是由同一个构 ...

  2. 在触屏设备中拖动 overflow 元素

    在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...

  3. Javascript 基础知识笔记

    标签(空格分隔): 廖老师学习笔记 javascript 基本入门 根据廖雪峰老师官网,自己看后的简单笔记 第一小节 基本知识 <script type="text/javascrip ...

  4. CopyU!v2.2 增加对设备信息的识别

    更新版本的CopyU!v2.2已经完成大部分功能的设计,主打升级功能“设备信息识别”已经基本完成,现在放上测试截图:

  5. myeclipse 写java代码提示 dead code 原因

    经常使用MyEclipse要么Eclipse编辑写java程序猿代码.您可能经常会遇到一个黄色警戒线:dead code:一般程序猿遇到这些问题都会置之不理,反正也不影响程序的编译运行.对,这不是bu ...

  6. cocos2d-x 3.0 Armature jsb 初体验

    有段时间没有写游戏代码了,这回来主要任务是要用jsb构建一个aprg动作游戏,看到3.0官方已经绑定好了armature的js函数,先来体验一把 3.0新建项目比2.2方便了很多,在终端运行tools ...

  7. insert into ... on duplicate key update 与 replace 区别

    on duplicate key update:针对主健与唯一健,当插入值中的主健值与表中的主健值,若相同的主健值,就更新on duplicate key update 后面的指定的字段值,若没有相同 ...

  8. TexturePacker的使用

    一.为什么要使用TexturePacker 这是应为我们做的游戏最终要运行在Android手机或者苹果手机上,而Android或者ios系统使用的是OpenGL ES来渲染.所以我们要针对OpenGL ...

  9. 台湾书籍代购网址——2013-08-25 16

    台湾书籍代购 博客来http://www.books.com.tw 三民http://www.sanmin.com.tw 诚品http://www.eslite.com 金石堂http://www.k ...

  10. 通过NSURLProtocol拦截HTTP转HTTPS来整合SPDY的记录

    众所周知,iOS 9.0之后苹果引入ATS限制,苹果也推荐尽量不要使用HTTP通讯了,毕竟是很不安全的.而国内各个有(wu)节操的运营商也会经常篡改请求HTTP请求.所以如果可能,在不影响性能的情况下 ...