原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父元素的中心.

负margin特性:负的margin-top,margin-left将当前元素往上/左拉,覆盖其他元素;

负的margin-bottom,margin-right将当前元素的后续元素往上/左拉,覆盖当前元素;

例如:

<!DOCTYPE html>

<htm>

<head>

    <title></title>

    <style type="text/css">

        #father

        {

            position:relative;

            width:200px;

            height:160px;

            border:1px dashed gray;

        }

        #son

        {

            position:absolute;

            top:50%;

            left:50%;

            margin-top:-30px;

            margin-left:-50px;

            width:100px;

            height:60px;

            background-color:Red;

        }

    </style>

</head>

<body>

    <div id="father">

        <div id="son"></div>

    </div>

</body>

</html>

　　在这个例子中,先利用position定位使#son的左上角位于#father的中心,再设置#son的margin-top,margin-left为其自身height/width的一般的负值,这样就轻松将其中心移至父元素中心.

利用负margin实现元素居中的更多相关文章

  1. 利用绝对定位与margin实现元素居中

    例: 要让一个width:100px ; height: 100px;的div,相对body居中. div{ width:100px; height:100px; border: 1px solid ...

  2. [转]关于负margin在页面中布局的应用

    本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...

  3. 我知道你不知道的负Margin

    现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负marg ...

  4. 负值之美：负margin在页面布局中的应用

    本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...

  5. 负margin应用案例几则（转载+总结）

    (一)自适应布局——左栏改右栏 这里先写个一列固定列宽,另一列自适应的两列布局,效果图: 侧栏移至右边,效果图: 其HTML <div class="wrap"> &l ...

  6. CSS艺术之---负margin之美

    CSS中负边距(nagative margin)是布局中常常使用的一个技巧.仅仅要运用得当时常会产生奇异的效果.勘称CSS中的奇淫巧计,非常多CSS布局方法都依赖于负边距.掌握它对于前端童鞋来说还是非 ...

  7. 负margin的原理及应用

    在很多布局中我们经常能够见到类似于margin:-10px;的用法,我们对正值的用法早已熟悉的不能再熟悉了,可是这负值到底有何用呢?听我给你吹. 负margin——普通文档流 普通文档流元素(不浮动, ...

  8. 负margin在页面布局中的应用

    关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 一. 左右列固定, ...

  9. 负margin一些奇葩的布局技巧

    copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...

随机推荐

  1. Codeforces Round #276 (Div. 1) A. Bits 贪心

    A. Bits   Let's denote as  the number of bits set ('1' bits) in the binary representation of the non ...

  2. [C++设计模式] composite 组合模式

    组合(Composite)模式的其他翻译名称也非常多,比方合成模式.树模式等等.在<设计模式>一书中给出的定义是:将对象以树形结构组织起来,以达成"部分-总体"的层次结 ...

  3. oc36--自定义构造方法在继承中的表现

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property int ag ...

  4. SQL 优化记录

    1. 对Where 语句的法则 1.1 避免在WHERE子句中使用in,not  in,or 或者having. 可以使用 exist 和not exist代替 in和not in. 可以使用表链接代 ...

  5. operator[] 重载

    #include <iostream>#include <vector>#include <string> class Assoc {    struct Pair ...

  6. 5-8 第五天 微信 JS-SDK

    SDK的难点不多,但是容易出错的地方特别多.几乎任何一个环节都会犯错误. 难道没有域名就不让你测了吗?别担心,有公众测试号, 域名这个代理呢是通过QQ浏览器的服务器调试,来绑定这个端口的,把这个服务开 ...

  7. 棋盘问题(dfs)

    http://poj.org/problem?id=1321 思路:按行搜索,回溯时还原棋盘. #include <stdio.h> #include <string.h> ] ...

  8. 0502 php简单了解

    准备工作: 安装好wamp,配置站点:apache2.4.9\conf\httpd.conf 注意事项: 1.必须有分号 2.不要有无意义空行,会以空格形式输出. 3.变量,关键字(if,for..) ...

  9. bzoj 2599(点分治)

    2599: [IOI2011]Race Time Limit: 70 Sec  Memory Limit: 128 MBSubmit: 3642  Solved: 1081[Submit][Statu ...

  10. html5 读取本地文件

    尊重原创:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html HTML5为我们提供了一种与本地文件系统交互的标准方式:Fil ...