为什么父元素不设置relative子元素就不能居中显示呢？
来源：2-10 编程练习
全栈丶obj
2019-11-15 22:43:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.per{
width: 300px;
height: 300px;
background: red;
margin-left: 200px;
margin-top: 200px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕糖
2019-11-16
同学你好，关于你的问题，回答如下：
1、不是不能居中，而是父级不设置定位的话，就不是相对于父级居中了，而是相对于窗口。
2、因为绝对定位是相对于有定位（除了静态定位以外的其他定位）的父级元素（若是父级没有定位的话，会一直往上找有定位的父级，都没有的话，最后会找到body）来进行定位的。
3、所以这里父级元素需要有定位才可以参考其来定位，不过不一定要是相对定位，出来静态定位外的其他定位都是可以的。
教辅资料中，也有关于“绝对定位”的总结，同学可以查看下。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
1
相似问题