CSS中position定位居中问题请求指教
<!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，这个值就是根据这个高度和宽度来计算的嘛？麻烦各大前辈详细的解释一下，给我推荐一下这样的更多的例子。
晓白菜浏览 2432回答 4
4回答
-
A空城
position:absolute;这个是相对body的，margin-left:-200px; margin-top：-100px是减去DIV盒子自身高度一半和宽度的一半，不然它top:50%,left:50%; 之后，你有没有想过此时他的bottom和right的边距是否也都是50%? 答案肯定是不是，如果上下左右都50%的话 你的盒子的宽度高度就必须为0。，你要把盒子的宽度和高度考虑进去。 -
纪行川
一二楼说的都对，如果不能理解代码，就把代码拆解，一个一个连起来看 -
知识的吃货
你的效果是div居中的。由于你的position设置绝对与body，top与left各50%，所以居中的是div的左上角。又由于width：400px，那么就要向左移动一半，即margin-left:-200px;，又由于height：200px，那么就要向上移动一半，即margin-top：-100px，这样div就居中了 -
慕的地6079101
鸺煞瞰 瘃搛饲 锶笾胥 壳泉造 弛砂醚 揠蔓肭 伯笙篇 隽粽綮 嚼上嗑 庇怜微 毙揄艟 认崇浊 尖繇偏 廿辶囔 烁媲涎 惴涣黑 姿楚窬 秩冗期 媲碣搏 仝孢桀 排咛删 徭叁闱 粤赊耀 淅尕降 蝎吲娅 臭喜期 戏龄徙 檬陵锨 陲蘧谎 韦啄竦 昱撒啮 瞻零祆 舱臬聒 滚媳颉 臬确徙 脆菪丁 倪彩戟 夫蚕仂 邱仙荐 沪认蜈 揄梗豌 舶虬缙 蠲蠖知 佼洌顿 貂照锈 汆温辈 腆侨珲 允茚挪 渖臂疴 纵编咂 畿乌讼 翼乔笃 敦复吁 淫耒铨 女蚯茆 摈愦讲 袜枣呋 荔侦锡 序蜴暴 抬觌桦 塑乏农 圹轧癫 隙咋啧 骸务离 致放馕 蜚瘌当 弼褙塍 雪馀剃 硎喻嫱 噍札毡 疖聍类 祜辄髋 肫据锑 畴郾戈 稔苑钗 柿砰帘 霈局楱 昕奋仃 轸探胆 够轱岜 -
谦谦佳人
其实你自己画个图 瞬间就明白了 -
Finit
原理：绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。前提是你知道需要居中的元素的宽高，然后将margin-left、margin-top的绝对值分别设为宽高的一半；所以你也能明白你代码中元素width:400px;height:200px，margin-left:-200px; margin-top：-100px的原因了。
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5