使用 CSS Grid (`place-items: center`) 来居中元素虽然简单,但它会将内容锚定在可视视口,而非整个浏览器窗口。当侧边栏或开发者工具等元素出现时,“完美居中”的内容在视觉上会显得偏移。 为了解决这个问题,作者计算了相对于物理浏览器窗口居中元素所需的偏移量。虽然 `window.innerWidth` 和 `window.outerWidth` 提供了额外的总空间,但它们无法揭示这些空间在屏幕上是如何分布的。 突破点在于利用指针事件(`screenX` 和 `clientX`)来映射网页在浏览器窗口中的位置。虽然 Firefox 直接提供了此数据,但 Chromium 需要在用户与页面交互时进行修正更新。作者最终将此逻辑封装为一个名为“center, actually”的工具,该工具可以自动检测并居中那些用户无法直接控制代码页面上的元素。