首页猿问 CSS中position定位居中问...

CSS中position定位居中问题请求指教

CSS3 Html/CSS Html5

晓白菜 2016-11-30 13:10:11

<!doctype html><html><head><meta charset="utf-8"><title>task3</title><style type="text/css">*{margin:0;padding:0;}div{width:400px;height:200px;background-color:#ccc;position:absolute;top:50%;left:50%;margin-left:-200px;margin-top:-100px}</style></head><body><div></div></body></html>这段代码是使用定位的方法让这个DIV居中了，但是我有一点想不通，margin-left:-200px; margin-top：-100px 这个值怎么来的，求前辈给我详细的说明一下，刚自学没多久。这个相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。这段代码里这个最初的包含块是不是就是我设置有宽度和高度的DIV，这个值就是根据这个高度和宽度来计算的嘛？麻烦各大前辈详细的解释一下，给我推荐一下这样的更多的例子。

查看完整描述

4 回答

已采纳

A空城

TA贡献14条经验获得超3个赞

position:absolute;这个是相对body的，margin-left:-200px; margin-top：-100px是减去DIV盒子自身高度一半和宽度的一半，不然它top:50%,left:50%; 之后，你有没有想过此时他的bottom和right的边距是否也都是50%? 答案肯定是不是，如果上下左右都50%的话你的盒子的宽度高度就必须为0。，你要把盒子的宽度和高度考虑进去。

1 反对回复 2016-11-30

晓白菜
这个还是有一点不太明白，不知道是不是陷入死循环了。这个POSITION:absolute是相对于BODY定位的，那么我已经设置了top:50% left:50%。剩下的bottom和right应该也是50%了啊。就像我在一张白纸上画一个长方形，我就把这个长方形画在白纸中间，不管这个长方形宽度和高度是多少，我只要把它画在正中央。左右剩余的空白都是想等的，上下剩余的空白也是相等的。为什么还要减去这个长方形自身的宽度和高度呢？我是这么理解的，难道我理解错了吗？好像我哪里理解错了，但是我还没发现。求前辈指导一下

回复 2016-11-30
A空城
如果你把一个长方形画在正中间，假设长方形宽为20%；高为10%；那你觉得此时他的上下左右边距是多少?是不是用100%减去长方形的占的宽度/2就是左右空白的边距了，上下边距也是同理（100%-10%）/2；当你的长方形宽高的单位不是100比的，是像素PX；那就是以上你疑惑的那样子写；还不明白的话我也没办法了。

回复 2016-11-30
晓白菜
谢谢了，终于弄明白了。脑袋迟钝啊。非常感谢

回复 2016-11-30

纪行川

TA贡献3条经验获得超1个赞

一二楼说的都对，如果不能理解代码，就把代码拆解，一个一个连起来看

1 反对回复 2016-11-30

知识的吃货

TA贡献3条经验获得超1个赞

你的效果是div居中的。由于你的position设置绝对与body，top与left各50%，所以居中的是div的左上角。又由于width：400px，那么就要向左移动一半，即margin-left:-200px;，又由于height：200px，那么就要向上移动一半，即margin-top：-100px，这样div就居中了

1 反对回复 2016-11-30

慕的地6079101

TA贡献3593条经验获得超0个赞

鸺煞瞰瘃搛饲锶笾胥壳泉造弛砂醚揠蔓肭伯笙篇隽粽綮嚼上嗑庇怜微毙揄艟认崇浊尖繇偏廿辶囔烁媲涎惴涣黑姿楚窬秩冗期媲碣搏仝孢桀排咛删徭叁闱粤赊耀淅尕降蝎吲娅臭喜期戏龄徙檬陵锨陲蘧谎韦啄竦昱撒啮瞻零祆舱臬聒滚媳颉臬确徙脆菪丁倪彩戟夫蚕仂邱仙荐沪认蜈揄梗豌舶虬缙蠲蠖知佼洌顿貂照锈汆温辈腆侨珲允茚挪渖臂疴纵编咂畿乌讼翼乔笃敦复吁淫耒铨女蚯茆摈愦讲袜枣呋荔侦锡序蜴暴抬觌桦塑乏农圹轧癫隙咋啧骸务离致放馕蜚瘌当弼褙塍雪馀剃硎喻嫱噍札毡疖聍类祜辄髋肫据锑畴郾戈稔苑钗柿砰帘霈局楱昕奋仃轸探胆够轱岜

反对回复 2021-10-15

谦谦佳人

TA贡献29条经验获得超7个赞

其实你自己画个图瞬间就明白了

反对回复 2016-11-30

Finit

TA贡献222条经验获得超80个赞

原理：绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。

前提是你知道需要居中的元素的宽高，然后将margin-left、margin-top的绝对值分别设为宽高的一半；所以你也能明白你代码中元素width:400px;height:200px，margin-left:-200px; margin-top：-100px的原因了。

反对回复 2016-11-30

晓白菜
这个还是有一点不太明白，不知道是不是陷入死循环了。这个POSITION:absolute是相对于BODY定位的，那么我已经设置了top:50% left:50%。剩下的bottom和right应该也是50%了啊。就像我在一张白纸上画一个长方形，我就把这个长方形画在白纸中间，不管这个长方形宽度和高度是多少，我只要把它画在正中央。左右剩余的空白都是想等的，上下剩余的空白也是相等的。为什么还要减去这个长方形自身的宽度和高度呢？我是这么理解的，难道我理解错了吗？好像我哪里理解错了，但是我还没发现。求前辈指导一下

回复 2016-11-30
闲人逛小白
前几天刚看完网页布局基础，我记得老师在讲绝对布局时说过若无已定位的祖元素的话偏移是以<html>标签为参照的

回复 2016-11-30

4 回答
0 关注
2431 浏览

关注

CSS中position定位居中问题请求指教

CSS中position定位居中问题请求指教

4 回答

相关问题推荐

添加回答

热搜

最近搜索清空

CSS中position定位居中问题请求指教

CSS中position定位居中问题请求指教

4 回答

相关问题推荐

添加回答