为什么margin是负数可以居中

2024-10-13

利用负margin实现元素居中

原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父元素的中心. 负margin特性:负的margin-top,margin-left将当前元素往上/左拉,覆盖其他元素; 负的margin-bottom,margin-right将当前元素的后续元素往上/左拉,覆盖当前元素; 例如: <!DOCTYPE html> <htm> <h

IE下div使用margin:0px auto不居中的原因

IE下div使用margin:0px auto不居中的原因一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下:<div id="cnbruce">margin: 0 auto 看看内容居中否</div>如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body>”声明文本居中,即[ Copy ] [ Run ] [ Save

绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位后margin: 0 auto;居中失效的解决方法</title> <style type=&q

IE8 margin:0 auto 不能居中显示的问题

ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了,检查了好几遍,没问题,然后用火狐和谷歌浏览器测试,居中了... 看来是浏览器兼容性的问题,突然想起现在用了win7,ie已经升级到了ie8,看来问题就处在ie8的兼容性上.百度之.... 特将解决方法复制到下面: IE6,7,Firefox下实现居中一般用:margin: auto 来实现,但在I

margin:0 auto;不居中

margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题! 2.没声明DOCTYPE①DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本.要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分! ②看看下面的代码

CSS样式margin:0 auto不居中

转载：IE下div使用margin:0px auto不居中的原因

转自:http://www.blogjava.net/sealyu/archive/2010/01/08/308640.html 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下:<div id="cnbruce">margin: 0 auto 看看内容居中否</div>如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body&

margin:0 auto;不能居中的原因

原因: 1.没有设置本身元素和父元素的宽度 2.本身元素使用了绝对定位和浮动 2.没声明DOCTYPE

解决使用绝对定位absolute后，margin：0 auto居中方法失效（转）

https://blog.csdn.net/qq_40678503/article/details/82780680

使用 margin 让div块内容居中

问:有一个div块,其width为300px,如何设置margin让div块居中显示? 答:margin设置为 margin:0 auto,即div块的上下外边距设置为 0 , 左右外边距设置为自动 auto. <style> div{ width:300px; margin:0 auto; } </style> </head> <body> <div>The money come back!</div> </body>

margin auto 实现居中，与text-align:center的区别

本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置. margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!这就是水平居中的意思,使用 margin:0px auto; 也是大家在做css div定位时的最常用方法,但是在使用

盒子模型的margin负数用法

盒子的margin用法大家都应该很清楚,在实际中一般使用margin来水平居中或者让自己移动相应的位置,但是margin给负数在实际中也是有用的. 如图为两个浮动的盒子. 给左边的盒子margin-left: -50px;后如图所示如图,蓝色盒子移动了,但是粉色盒子自身只是被压住了,并没有移动. 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

css————关于margin:0px auto的几个居中问题

前言 margin:0px auto;适用于指定了固定宽度的div与其它元素,比如p,img等,使用 margin:0px auto,居中是大家在做css div定位时的最常用方法,但是据我自己的使用过程来看,常有居中不了的情况. 与 margin:100px 混用,导致无法居中这种情况下,因为前面设了margin:0px auto; 但是后面又设了margin:100px,这明显是相矛盾的,不仅如此,如果同时使用了margin:0px auto ; 和 float:left ,也一样都不生效

绝对定位上下左右都为0 margin为auto为什么能居中

老规矩,先来一段废话,我大学刚入门的时候觉得CSS很简单,记一记就会了,不就是盒模型嘛,现在想来觉得自己那时候真的很自以为是哈哈.但是随着工作沉淀,我明白了任何技术都有着它的深度和广度,正是因为不少人对CSS都抱有轻视的态度,不说精通,能把CSS学到位的人都少之又少.当然我这么说并不代表我的CSS如何了得,事实上,我也是个切图仔,对CSS知之甚少. 回归正题: 元素居中的方法有很多比如display:flex.绝对定位结合transform: translate(-50%, -50%)等等,但我

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 我不是这种实现方法的第一人,可能这只是非常常见的一种小技术,我斗胆将其命名为绝对居中(Abs

各种div+css居中方式调整（转载）

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术分类: 前端开发2013-09-11 21:06 24959人阅读评论(3) 收藏举报绝对居中垂直居中水平居中CSS居中代码目录(?)[+] Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto;

关于前端的margin

margin 边界,元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南我比较喜欢使用“外边距”这个词来解释margin(同理padding可以称之为“内边距”,但是我又恰恰喜欢称呼padding为“补白”或者“留白”),我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. margin设置负数注意点 A.负margin是绝对标准的CSS 这不是开玩笑.W3C甚至标注过:对于margin属

CSS实现绝对定位居中

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 我不是这种实现方法的第一人,可能这只是非常常见的一种小技术,我斗胆将其命名为绝对居中(Absolute Centering) ,虽然如此,但是大多数讨论

[转] 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

转自:http://blog.csdn.net/freshlover/article/details/11579669 Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0

img在div中居中的问题

Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中:(有的设计师为图片再加个div标签,然后通过div标签的margin实现居中). 如果图片在div中下的span属性中,必须转换成display:block:然后padding-top:10px.

让图片在div 中居中的方法

方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt.gif" width="150" height="100" /> </div> CSS样式如下: div {width:300px; height:150px; background-color:#CCC; border:#000 1px

为什么margin是负数可以居中

热门专题