CSS问题：absolute定位元素居中的做法疑问

absolute定位元素居中的做法的疑问

已知做法

1、设定absolute定位
2、left：50%
3、margin-left：-宽度的一半

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位水平垂直居中</title>
    <style>
        /* 绝对定位的盒子不能通过margin：auto来居中，但可通过定位加maring-left（水平）marging-top（垂直居中）来实现 */
        .box {
            position: absolute;
            /* 1. left 走 50%  父容器宽度的一半 */
            left: 50%;
            /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            /* 这里不可以用margin-right：100px代替 */
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

运行效果：

疑问

上述方法的第三步margin-left：-宽度的一半为什么
不可以换成margin-right：宽度的一半
改后效果：

因为left 50% 是将元素的左边界定位到父容器宽度的一半
margin-left: -100px; 是让元素的左边与原先定位位置的左边界之间的距离为-100。
而元素的右边界没有定位。没有原先定位位置的右边界为参照，margin-right也就不会起作用。
你把 left: 50%; 改成 right: 50%; 就可以用 margin-right: -100px;
比如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位水平垂直居中</title>
    <style>
        /* 绝对定位的盒子不能通过margin：auto来居中，但可通过定位加maring-left（水平）marging-top（垂直居中）来实现 */
        .box {
            position: absolute;
            right: 50%;
            /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
            margin-right: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */
        }
    </style>


</head>
<body>
    <div class="box"></div>
</body>
</html>

如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮

1.因为你的盒子宽度是200呀
2.因为前面用的left定位，所以用margin-left好计算一些。

定位的坐标点不在盒子中间，而是在盒子的左上角那个点，你可以把盒子看成一个直角坐标轴，左上角为（0,0）点。相对的定位也是按照（0,0）点来的。所以造成不一致