页面排列中左侧对齐和居中对齐的原理和差别是？

xpp6541478

一、前提条件
有一个很疑惑的问题，麻烦大佬帮忙解释下，没太搞懂。原型如下图所示，说明一下1、红色：动态面板，固定到浏览器左侧顶部，300*75
2、蓝色：动态面板，1000*100，页面载入时设置其宽度为[[Window.width-300]]
3、绿色：用来测量红色和蓝色距离，动态面板，固定到浏览器左侧顶部，160*30（删除后不影响现象中描述的结果）
4、我浏览器的Window.width值为1920



二、现象
1、页面排列设置为左侧对齐时，结果如下

2、页面排列设置为居中对齐时，结果如下

三、疑惑
1、为啥两种方式有差异？
2、为什么两种方式下差160（绿色的宽度），啥原理？

尹广磊

动态面板固定到浏览器左边，是永远绝对的。而页面居中随着宽度的不同，左右的空白就会长短不一。
如果你想两个东西的位置保持不关，需要所有的都居左或是居中。
像你上边红色的面板，可以设置为相对浏览器左右居中，然后指定一个负边距让它移动到左边，但是由于浏览器宽度可能不同，左边未必是从0开始。

xpp6541478

尹广磊 发表于 2021-5-21 14:57
动态面板固定到浏览器左边，是永远绝对的。而页面居中随着宽度的不同，左右的空白就会长短不一。
如果你想 ...

了解
另外一个问题，页面排列设置为居中时，是怎么运算的。比如上图的红色和蓝色面板，当设置为居中时蓝色距离红色的距离时130，而且此时浏览器有横向的滚动条。我能理解的算法如下，但明显不是。
Windows.width（1920）-  红色.width（300）- 蓝色.width（1000）=620，然后除以2，此时蓝色应该距红色310，没有横向滚动条
上述算法的原理来自一个元件时居中显示距离左侧的距离：假设页面中只有一个蓝色面板，1920-1000=920，然后除以2，蓝色应该距离左右倒是460.