利用负margin实现元素居中
原理就是对当前元素的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实现元素居中的更多相关文章
- 利用绝对定位与margin实现元素居中
例: 要让一个width:100px ; height: 100px;的div,相对body居中. div{ width:100px; height:100px; border: 1px solid ...
- [转]关于负margin在页面中布局的应用
本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...
- 我知道你不知道的负Margin
现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负marg ...
- 负值之美:负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...
- 负margin应用案例几则(转载+总结)
(一)自适应布局——左栏改右栏 这里先写个一列固定列宽,另一列自适应的两列布局,效果图: 侧栏移至右边,效果图: 其HTML <div class="wrap"> &l ...
- CSS艺术之---负margin之美
CSS中负边距(nagative margin)是布局中常常使用的一个技巧.仅仅要运用得当时常会产生奇异的效果.勘称CSS中的奇淫巧计,非常多CSS布局方法都依赖于负边距.掌握它对于前端童鞋来说还是非 ...
- 负margin的原理及应用
在很多布局中我们经常能够见到类似于margin:-10px;的用法,我们对正值的用法早已熟悉的不能再熟悉了,可是这负值到底有何用呢?听我给你吹. 负margin——普通文档流 普通文档流元素(不浮动, ...
- 负margin在页面布局中的应用
关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 一. 左右列固定, ...
- 负margin一些奇葩的布局技巧
copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...
随机推荐
- js获得子页面元素
在主页面中.添加iframe子页面,假设须要获得子页面的元素则能够使用javascript的contentWindow来获得,注意iframe和frameset必须加入id.详细样例例如以下: mai ...
- 对扩展openflow协议的一点思考
软件定义X变得越来越火,正所谓,Software is eating the world. 软件定义网络也是如此.不论是在工业界还是学术界都将是一次伟大的革命,都在紧随着这个行业的方向,找自 ...
- ip地址转换成16进制long
<span style="font-size:18px;">public class IpUtil { /** * ip地址转换成16进制long * @param i ...
- springboot + rabbitmq 整合示例
几个概念说明:Broker:简单来说就是消息队列服务器实体.Exchange:消息交换机,它指定消息按什么规则,路由到哪个队列.Queue:消息队列载体,每个消息都会被投入到一个或多个队列.Bindi ...
- 历届试题 邮局(dfs+剪枝)
历届试题 邮局 时间限制:1.0s 内存限制:256.0MB 问题描述 C村住着n户村民,由于交通闭塞,C村的村民只能通过信件与外界交流.为了方便村民们发信,C村打算在C村建设k ...
- B1208 [HNOI2004]宠物收养所 平衡树||set (滑稽)
这个题是一道splay裸题,但是我不太会写,所以用set直接水过去!!!哈哈哈哈,美滋滋. set总结: set是一个集合,然后里面没用重复的元素.里面有一些函数: begin() ,返回se ...
- 麦森数--NOIP2003
题目描述 形如2P−12^{P}-12P−1 的素数称为麦森数,这时PPP 一定也是个素数.但反过来不一定,即如果PPP 是个素数,2P−12^{P}-12P−1 不一定也是素数.到1998年底,人们 ...
- js返回16位随机数
public string GetDataRandom() { string strData=DateTime.Now.ToString(); ...
- 【STM32H7教程】第23章 STM32H7的MPU内存保护单元(重要)
完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第23章 STM32H7的MPU内存保护单元 ...
- VUE-搜索过滤器
先看看效果 首先引入 <script src="https://cdn.jsdelivr.net/npm/vue"></script> HTML部分 < ...