关于绝对定位
0
悬赏园豆：5
[已解决问题]
解决于 2015-08-24 11:38
目的是实现div水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>负margin和绝对定位实现块级元素水平垂直居中</title>
<style type="text/css">
body{
margin:0;padding:0;
width:500px;
height:400px;
}
.wrap{
width: 200px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-100px;
background:pink;
}
</style>
</head>
<body>
<div class="wrap">
</div>
</body>
</html>
效果图如下：中间粉色div在屏幕水平垂直居中，为什么body设置了宽度和高度后，body的背景色还是充满整个屏幕呢？
但是body设置border后，
body{
margin:0;padding:0;
width:500px;
height:400px;
background:#651;
border:1px solid black;
}
效果图如下：粉色div还是水平垂直居中，body到底是哪个区域呢，body边框和背景色的区域不一致；div的left:50%; top:50%;50%不是body的宽度的一半吗？div绝对定位后，是相对于div的包含块定位的，那么在这个例子中的包含块不是body吗？
最佳答案
1
我使用firefox，测试效果和你的完全一致！
收获园豆：2
<div>使用了position属性，因此它会根据左上角（0,0）位置去对自己进行定位；
然后，你是不是想问，<body>可是<div>的父亲元素，为什么没有相对于<body>定位，那是因为你的<body>没有添加position属性，position="absolute";
对于<body background="xxxx">目的是，给html文档添加背景；
但是html4.0.1和html5都已经废弃不在使用；
正确的方法是：通过css，<body style="background:#651">
另外，不要钻牛角尖；谁会动用body的大小，通常都是，在里面构建<div>；
@易猜: 谢谢
其他回答(3)
0
我给你W3Cschool测试没有问题
收获园豆：1
谢谢
1
在body的样式后面加个这个position:absolute;，
body{
margin:0;padding:0;
width:500px;
height:400px;
background:#651;
border:1px solid black;
position:absolute;
}
如果粉色的div要相对于父级的话，那么父级也要设置position:absolute; 否则的话，粉色的定位会相对于窗口。已亲测~
收获园豆：1
博客园好有爱啊，谢谢，菜鸟以后要多多请教各位了
1
css中规定：
对于(x)html文档，如果根元素<html>的background-color属性为“transparent”，并且background-image属性为“none”，则使用<body>的相关属性来替代<html>元素的属性，并且不再对<body>的背景进行绘制。
出处：
http://www.w3.org/TR/CSS21/colors.html#background
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For HTML documents whose root HTML element has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of those properties from that HTML element's first BODY element child when painting backgrounds for the canvas, and must not paint a background for that BODY element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element. This does not apply to XHTML documents.
收获园豆：1
谢谢
