<!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. cd命令进入D盘

    CD命令是更改目录命令如果要进入D盘 不用这个命令 直接输入 D: 回车 即可要是你非要使用CD命令那要加参数/DCD D:系统只是认为你想在系统中记忆一下D盘所以还是返回原先目录例:D盘下有一个目录 ...

  2. backbonejs mvc框架的增删查改实例

    一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...

  3. BZOJ2492 Revenge of Fibonacci

    首先我们高精度加法算出前10W个数... 然后把所有的前40位搞出来建成trie树,于是就变成了模板题了... 说一下...这题要是直接建出来son[tot][10]会MLE...所以...建trie ...

  4. Servlet容器如何同时来处理多个请求

    工作者线程Work Thread:执行代码的一组线程调度线程Dispatcher Thread:每个线程都具有分配给它的线程优先级,线程是根据优先级调度执行的Servlet采用多线程来处理多个请求同时 ...

  5. mapreduce 输入输出类型

    默认的mapper是IdentityMapper,默认的reducer是IdentityReducer,它们将输入的键和值原封不动地写到输出中. 默认的partitioner是HashPartitin ...

  6. uva 10491

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  7. 【转】linux /centos 中OpenSSL升级方法详解

    相关软件下载地址 Apache:http://httpd.apache.org/ Nginx:http://nginx.org/en/download.html OpenSSL:http://www. ...

  8. xlistview的（java）

    package com.bwie.xlistviews; import java.text.SimpleDateFormat;import java.util.Date; import com.bwi ...

  9. ODI 12c中使用Groovy脚本创建工程

    本文主要介绍在ODI中使用groovy创建工程,并添加一个表转换的映射.要创建groovy脚本,可以从ODI Studio的菜单:工具->Groovy->新脚本 打开一个编辑窗口.在执行下 ...

  10. NCBI原始数据下载by Aspera Connect

    主要参考这篇文章: http://mp.weixin.qq.com/s?__biz=MzA5NjU5NjQ4MA==&mid=2651154488&idx=1&sn=e693a ...