<!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 這個值怎么來的，求前輩給我詳細的說明一下，剛自學(xué)沒多久。這個相對定位是“相對于”元素在文檔中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊。這段代碼里這個最初的包含塊是不是就是我設(shè)置有寬度和高度的DIV，這個值就是根據(jù)這個高度和寬度來計算的嘛？麻煩各大前輩詳細的解釋一下，給我推薦一下這樣的更多的例子。
4 回答
已采納
A空城
TA貢獻14條經(jīng)驗 獲得超3個贊
position:absolute;這個是相對body的，margin-left:-200px; ?margin-top：-100px是減去DIV盒子自身高度一半和寬度的一半，不然它top:50%,left:50%; 之后，你有沒有想過此時他的bottom和right的邊距是否也都是50%? ?答案肯定是不是，如果上下左右都50%的話 ?你的盒子的寬度高度就必須為0。，你要把盒子的寬度和高度考慮進去。
-
曉白菜這個還是有一點不太明白，不知道是不是陷入死循環(huán)了。這個POSITION:absolute是相對于BODY定位的，那么我已經(jīng)設(shè)置了top:50% left:50%。剩下的bottom和right應(yīng)該也是50%了啊。就像我在一張白紙上畫一個長方形，我就把這個長方形畫在白紙中間，不管這個長方形寬度和高度是多少，我只要把它畫在正中央。左右剩余的空白都是想等的，上下剩余的空白也是相等的。為什么還要減去這個長方形自身的寬度和高度呢？ 我是這么理解的，難道我理解錯了嗎？ 好像我哪里理解錯了，但是我還沒發(fā)現(xiàn)。求前輩指導(dǎo)一下 -
A空城如果你把一個長方形畫在正中間，假設(shè)長方形寬為20%；高為10%；那你覺得此時他的上下左右邊距是多少?是不是用100%減去長方形的占的寬度/2就是左右空白的邊距了，上下邊距也是同理（100%-10%）/2；當(dāng)你的長方形寬高的單位不是100比的，是像素PX；那就是以上你疑惑的那樣子寫；還不明白的話我也沒辦法了。
-
曉白菜謝謝了，終于弄明白了。腦袋遲鈍啊。非常感謝
知識的吃貨
TA貢獻3條經(jīng)驗 獲得超1個贊
你的效果是div居中的。由于你的position設(shè)置絕對與body，top與left各50%，所以居中的是div的左上角。又由于width：400px，那么就要向左移動一半，即margin-left:-200px;，又由于height：200px，那么就要向上移動一半，即margin-top：-100px，這樣div就居中了
慕的地6079101
TA貢獻3593條經(jīng)驗 獲得超0個贊
鵂煞瞰
瘃搛飼
鍶籩胥
殼泉造
弛砂醚
揠蔓肭
伯笙篇
雋粽綮
嚼上嗑
庇憐微
斃揄艟
認崇濁
尖繇偏
廿辶囔
爍媲涎
惴渙黑
姿楚窬
秩冗期
媲碣搏
仝孢桀
排嚀刪
徭叁闈
粵賒耀
淅尕降
蝎吲婭
臭喜期
戲齡徙
檬陵锨
陲蘧謊
韋啄竦
昱撒嚙
瞻零祆
艙臬聒
滾媳頡
臬確徙
脆菪丁
倪彩戟
夫蠶仂
邱仙薦
滬認蜈
揄梗豌
舶虬縉
蠲蠖知
佼洌頓
貂照銹
汆溫輩
腆僑琿
允茚挪
瀋臂疴
縱編咂
畿烏訟
翼喬篤
敦復(fù)吁
淫耒銓
女蚯茆
擯憒講
襪棗呋
荔偵錫
序蜴暴
抬覿樺
塑乏農(nóng)
壙軋癲
隙咋嘖
骸務(wù)離
致放馕
蜚瘌當(dāng)
弼褙塍
雪馀剃
硎喻嬙
噍札氈
癤聹類
祜輒髖
肫據(jù)銻
疇郾戈
稔苑釵
柿砰簾
霈局楱
昕奮仃
軫探膽
夠轱岜
Finit
TA貢獻222條經(jīng)驗 獲得超80個贊
原理：絕對定位的元素定義的top、right、bottom、left等值是元素自身的邊界到最近的已定位的祖先元素的距離，這個元素自身的邊界指的就是margin定義的邊界，所以，如果margin為正的時候，那它的邊界是向外擴的，如果margin為負的時候，則它的邊界是向里收的。
前提是你知道需要居中的元素的寬高，然后將margin-left、margin-top的絕對值分別設(shè)為寬高的一半；所以你也能明白你代碼中元素width:400px;height:200px，margin-left:-200px; ?margin-top：-100px的原因了。
-
曉白菜這個還是有一點不太明白，不知道是不是陷入死循環(huán)了。這個POSITION:absolute是相對于BODY定位的，那么我已經(jīng)設(shè)置了top:50% left:50%。剩下的bottom和right應(yīng)該也是50%了啊。就像我在一張白紙上畫一個長方形，我就把這個長方形畫在白紙中間，不管這個長方形寬度和高度是多少，我只要把它畫在正中央。左右剩余的空白都是想等的，上下剩余的空白也是相等的。為什么還要減去這個長方形自身的寬度和高度呢？ 我是這么理解的，難道我理解錯了嗎？ 好像我哪里理解錯了，但是我還沒發(fā)現(xiàn)。求前輩指導(dǎo)一下
-
閑人逛小白前幾天剛看完網(wǎng)頁布局基礎(chǔ) ，我記得老師在講絕對布局時說過若無已定位的祖元素的話偏移是以<html>標(biāo)簽為參照的
添加回答
舉報
0/150
提交
取消