2-12编程练习为什么要向左偏移div块一半的距离。
以下是代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.test{
width: 800px;
height: 100px;
background: red;
position:fixed;
left:50%;
margin-left:-400px;
/*此处写代码*/
}
.out{
width: 100%;
height: 2000px;
background-color: #abcdef;
position:relative;
}
</style>
</head>
<body>
<div class="out">
<div class="test"></div>
</div>
</body>
</html>
为什么要让div块向左移div块的一半距离才可以，即使添加了个-400的值为什么就居中了呢？因为父元素设定的是百分百契合页面，并不知道具体的值是多少啊，特特特别不理解为什么要向左偏移div块的一半距离就可以居中了，右边的外边距还是0，右边又怎么会空出来一些部分呢？
如果我们给这个红色的div块设定的宽度是1000px，那么设置左边为50%后。是不是也需要再向左移动-500值就可以了。
正在回答
你好，如下，因为先设置了left50%，就是如下的情况，红色div块向右移动了父级的50%，现在div红色块左边框部分所在的位置就是父级的50%处（一半），所以红色块设置margin-left:负的自身的一半，会让红色块本身向左移动自身的一半，这个时候，红色块的一半处以父级的一半处不就正好在同一个位置么，可以测试下，先设置left:50%，看下效果哦。
红色的块如果设置的是1000px的话，它的负一半，就应该是-500px哦。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星