原理就是对当前元素的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. Handler类和Handler,Loop,MessageQueue的工作原理

    原文地址:http://blog.csdn.net/xiyangyang8/article/details/50754771 Handler类的作用主要有两种: 1.在新启动的线程中发送消息. 2.在 ...

  2. 关于QT版本的安装配置的一些困惑

    大概是之前安装和使用QT太顺利了,什么都没注意就开始使用了.在使用VS2012开发Qt5.31的程序一段时间以后,虽然好用,但是发现其编译的程序不能在XP上使用,要打补丁才行.不仅VS2012本身要打 ...

  3. oc32--构造方法1

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

  4. 最短路（ spfa）

    最短路 http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2622 #include <std ...

  5. Play on Words（欧拉路）

    http://poj.org/problem?id=1386 题意:给定若干个单词,若前一个的尾字母和后一个单词的首字母相同,则这两个单词可以连接,问是否所有的单词都能连接起来. 思路:欧拉路的判断, ...

  6. 【BZOJ4555】【TJOI2016】【HEOI2016】求和

    题目 传送门 解法 我们可以用容斥来求第二类斯特林数 我们知道, 第二类斯特林数\(S(n, k)\)是\(n\)个元素放进\(k\)个无标号的盒子里, 不可以含有空的. 于是我们可以考虑可以含有空的 ...

  7. GYM 100741A Queries(树状数组)

    A. Queries time limit per test 0.25 seconds memory limit per test 64 megabytes input standard input ...

  8. Rancher 2：添加 NFS client provisioner 动态提供 Kubernetes 后端存储卷

    一.前提说明 1.说明: NFS client provisioner 利用 NFS Server 给 Kubernetes 作为持久存储的后端,并且动态提供PV. 默认 rancher 2 的存储类 ...

  9. mysql 年龄计算（根据生日字段）

    mysql 年龄计算(根据生日字段) year( from_days( datediff( now( ), birthdate))) //获取年龄 now() 当前时间,精确到秒 datediff(b ...

  10. 【DP】编辑距离

    日常吐槽:关于DP,有一种莫名的恐惧...maybe源于与mtw大佬与quantum11大佬,初中时抬老师爬楼梯的经历... 言归正传: 编辑距离 [题目描述] 设A和B是两个字符串.我们要用最少的字 ...