<!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. 支持SQL Server数据库又支持MongoDB数据库的数据访问设计

    网站整体架构建议采用工厂模式 分别包括:数据访问层DAL,数据访问接口层IDAL,工厂层DALFactory,业务逻辑层,显示层这样的架构方式 在WebConfig配置采用何种数据库的数据访问层 &l ...

  2. 小心buffer的拼接问题 --转

    最近遇见一个从前没有遇见的陷阱,就是data里的chunk拼接. 由于本人身为前端工程师,对buffer的概念实在是认识不足.这次的场景是我要通过http.get去抓取远端的网页文件,很不小心的是对方 ...

  3. eclipse 项目修改和更新项目,回退版本，解决分支的冲突的办法

    一个关于git的图 1.我在github建立了3个分支. 2.把其中一个分支拉到本地. 项目修改提交到远程库 3.修改完代码以后commit项目,点击项目右击->team->commit ...

  4. Java多线程-新特征-阻塞队列ArrayBlockingQueue

    阻塞队列是Java5线程新特征中的内容,Java定义了阻塞队列的接口java.util.concurrent.BlockingQueue,阻塞队列的概念是,一个指定长度的队列,如果队列满了,添加新元素 ...

  5. JDE开发端安装笔记

    JDE版本:JD Edwards EnterpriseOne 9.1.4 for Microsoft 64bit Oracle客户端:Oracle Database 11g Release 2 Cli ...

  6. linux系统设置静态IP 查看网卡配置文件

    http://jingyan.baidu.com/article/455a99508be7cda167277865.html vi /etc/sysconfig/network-scripts/ifc ...

  7. 在Ios里UIWebView参入js

    //修改图片大小适应webView宽高度            [webView stringByEvaluatingJavaScriptFromString:       @"var sc ...

  8. S1:对象与JSON

    JSON全称为JavaScript对象表示法(JavaScript Object Notation). JSON是JavaScript中对象的字面量,是对象的表示方法,通过使用JSON,可以减少中间变 ...

  9. NSString asscii格式(2进制) 转 utf8格式——解决iOS自己处理http socket数据，遇到Transfer-Encoding: chunked时

    因为需要实现自己的http客户端,就要自己模拟http 的socket通讯: 上行不难,自己处理好http即可. 但下行时,服务器端的动态语言返回数据有可能会是这种格式: http头 16进制表示的数 ...

  10. “Unable to execute dex: Multiple dex files”如何解决？

    遇到报错: [2014-02-13 17:27:03 - Dex Loader] Unable to execute dex: Multiple dex files define Lcom/kkdia ...