原理就是对当前元素的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. 1215-Cannot add foreign key constraint

    1.错误描写叙述 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...

  2. 【Android开发VR实战】三.开发一个寻宝类VR游戏TreasureHunt

    转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53939303 本文出自[DylanAndroid的博客] [Android开发 ...

  3. 好记性不如烂笔头——WebService与Remoting

    一.WebService总体上分为5个层次: 1)HTTP传输信道 2)XML的数据格式 3)SOAP的封装协议,用于传输 4)WSDL的描述方式,用于引用 5)UDDI,通用描述.发现与集成服务,用 ...

  4. Delphi研究，对全局变量函数与OOP编程关系的一点体会 good

    感叹:设计VCL的人真是神人啊,感觉比Pascal编译器的设计人还要牛很多,把整个Windows架构理了一遍,封装的如此之好,复用的如此之好(以至于Delphi的控件满天飞,使用还特别容易),简直惊为 ...

  5. Linux gadget驱动分析1------驱动加载过程

    为了解决一个问题,简单看了一遍linux gadget驱动的加载流程.做一下记录. 使用的内核为linux 2.6.35 硬件为芯唐NUC950. gadget是在UDC驱动上面的一层,如果要编写ga ...

  6. 0x6A 网络流初步

    CH Round #17-C 这个算是一个技能点吧,不点不会,点了就没什么了.懒得写看书吧书上的1应该是0... 我又回来了太懒了不想翻书还是写写吧 必须边的判定条件:该边流量为0且两端的点在残余网络 ...

  7. 【POJ 3322】 Bloxorz I

    [题目链接] http://poj.org/problem?id=3322 [算法] 广度优先搜索 [代码] #include <algorithm> #include <bitse ...

  8. 【NOI 2015】 荷马史诗

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4198 [算法] 不难发现,题目中所说的编码方式就是哈夫曼编码 注意合并时优先合并深度 ...

  9. B2460 [BeiJing2011]元素 线性基

    这个题是对刚才线性基的一个补充,就是中间有一些小贪心,贪心就很有意思,先按权值排序,然后就瞎搞就行了. 题干: Description 相传,在远古时期,位于西方大陆的 Magic Land 上,人们 ...

  10. 动态规划---区间dp

    今天写内网题,连着写了两道区间dp,这里就总结一下. 区间dp思想主要是先枚举f[i][j]中的i,再枚举j,再枚举一个1~j之间的变量k,一般是f[i][j] = max(f[i][j],f[i][ ...