为什么left设百分比，margin-left设自己宽度的负一半就可以居中，为什么不能都设分数或者都设负一半像素呢
来源：3-11 编程练习
慕勒1228195
2021-06-01 21:46:13
<!DOCTYPE html>
<html lang="en">
<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;
}
</style>
</head>
<body>
<div class="out">
<div class="test"></div>
</div>
</body>
</html>
1回答
-
好帮手慕久久
2021-06-02
同学你好，解答如下：
1、left属性的值可以设置成百分比，也可以设置成具体的数值，比如20px，但不能设置成分数（语法不允许）。
2、“left:50%;、margin-left:负自身宽度的一半；”只是让元素实现居中的一种方式，不是唯一的方式。可以通过设置其他样式，让元素居中。比如通过计算，直接设置margin-left的值：
当然也可以考虑通过给left、margin-left设置百分比的形式来实现，此时left、margin-left的具体数值，要通过计算得到，计算过程可能比较麻烦。
综合考虑，“left:50%;、margin-left:负自身宽度的一半；”这种方式是比较简单的，一般元素的宽度都不会太大，“负自身宽度的一半”的计算会比较简单，所以我们推荐使用这种方式。
3、以如下代码为例，给同学讲解一下“left:50%;、margin-left:负自身宽度的一半；”的原理：
left的值如果设置成百分数，是相对于自己的“定位参照物”来计算的；上图中，.test是相对于.out来定位的，所以left 的50%是相对于.out来计算的，left:50%;的效果就是让.test水平移动到父元素的中线，注意此时是.test的左侧边缘与父元素中线对齐：
从效果图上能看出，此时.test并没有在.out中居中，因为还差.test宽度的一半，需要把.test往左移动自己宽度的一半：
同学的代码中，.test设置的fixed定位，.test的“定位参照物”是浏览器窗口，居中过程与上面上面一样。
祝学习愉快！
0
相似问题