<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta name="author" content="胡超" />
<meta charset="utf-8"/>
<style type="text/css">
div { /*负边距margin使居中，首先定位到50% 然后再通过负边距拉回 元素高的一半 宽的一半*/
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
</style>
</head>

<body>
<div>
</div>
</body>
</html>

负margin居中的更多相关文章

  1. 利用负margin实现元素居中

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

  2. 负margin的原理以及应用

    负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...

  3. css布局之负margin妙用及其他实现

    相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...

  4. CSS负margin的影响

    原文 简书原文:https://www.jianshu.com/p/87677fd2ea34 相关文章: CSS负边距margin的应用:https://www.cnblogs.com/shcrk/p ...

  5. 负margin的移位参考线

    同早年~ 问题描述 在xx项目中,羊城通卡号的输入框处使用了xx库中的实现方式,即将提示文字标签<label>通过负margin移位到<input>框的下面.静态时展现良好,j ...

  6. 负margin小记

    static元素  margin-top/left负值,元素向指定方向移动,               margin-bottom/right负值,元素不动,后续元素前移 float元素   左浮, ...

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

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

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

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

  9. 负margin使用权威指南

    自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...

随机推荐

  1. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  2. 使用window.navigator.userAgent属性判断浏览器类型及版本

    使用window.navigator.userAgent属性判断浏览器类型及版本 2011-12-11 22:03:11 window.navigator.userAgent属性包含了浏览器类型.版本 ...

  3. Java多线程-新特性-有返回值的线程

    在Java5之前,线程是没有返回值的,常常为了“有”返回值,破费周折,而且代码很不好写.或者干脆绕过这道坎,走别的路了. 现在Java终于有可返回值的任务(也可以叫做线程)了. 可返回值的任务必须实现 ...

  4. 生JS实现jQuery的ready方法呢？下面是其中之一的做法：

    function ready(fn){ if(document.addEventListener){      //标准浏览器 document.addEventListener('DOMConten ...

  5. cmd扩展路径

    在命令行窗口中,输入for /? 即可得到如下参数解释==== 对一组文件中的每一个文件执行某个特定命令. FOR %variable IN (set) DO command [command-par ...

  6. 六种流行的语言---C、C++、python、Java、php、C#比较[转]

    语言大餐 回归正题,本文是六种语言连接mysql数据库的代码展示,在LZ尝试的过程中,无论是语言环境搭建.mysql依赖库的导入还是代码的风格,各种语言都各有千秋.接下来,我们就让这些语言一一登场吧. ...

  7. hdu 4622 Reincarnation

    http://acm.hdu.edu.cn/showproblem.php?pid=4622 用字典树把每一个字符串对应成一个整数 相同的字符串对应到相同的整数上 把所用的串对应的整数放在一个数组里 ...

  8. Fair Photography

    题目大意: 给出直线上N个点的位置和颜色(0或1),求最大的区间,使得区间内0的个数大于等于1的个数且0的个数减去1的个数为偶数. 解题过程: 1.先贴个lsdsjy大牛的线段树的做法:http:// ...

  9. flask剖析

    1.为何只要通过import request,就能拿到对应的request呢?怎么解决区分请求,区分线程的问题? 简而言之,就是通过拿栈顶对象就表示是当前活动的对象 但对于多线程,由于栈的数据结构是 ...

  10. 从协议VersionedProtocol开始3——ClientProtocol、DatanodeProtocol、NamenodeProtocol、RefreshAuthorizationPolicyProtocol、RefreshUserMappingsProtocol

    1.ClientProtocol这个玩意的版本号是61L:DatanodeProtocol 是26L:NamenodeProtocol是 3L;RefreshAuthorizationPolicyPr ...