居中一个 div 以前需要这样的小仪式：.thing { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 现在几乎令人失望地简单：body { display: grid; min-height: 100dvh; place-items: center; } 我在你正在阅读的 .site div 上使用了这个。它看起来是居中的，直到我在一个侧边栏可见的浏览器中打开它。 .site div 仍然是完美居中的，只是在错误的矩形内。我认为修复应该很简单：JavaScript 知道网页视图和浏览器窗口的宽度。 window.innerWidth // 网页视图 window.outerWidth // 整个浏览器窗口 const browserChrome = window.outerWidth - window.innerWidth ; 侧边栏在左侧，我可以通过这个差异的一半将 .site 移回：const shift = -browserChrome / 2; .site { translate: var(--window-center-shift, 0px); } 这有效，直到我打开了开发者工具。开发者工具破坏了简单的修复 我的开发者工具固定在右侧，因此宽度差异现在包括了两侧的浏览器 UI。它给了我总宽度，但无法告诉我这个总宽度是如何分配的。最终给我缺失坐标的是指针。一个可信的指针事件知道它在屏幕上的位置以及它在网页视图中的位置，这足以定位网页视图在窗口中的位置：const viewportLeft = event.screenX - event.clientX * scale ; const viewportRight = viewportLeft + innerWidth * scale ; const left = viewportLeft - window.screenX ; const right = window.screenX + outerWidth - viewportRight ; const shift = (right - left) / (2 * scale); Firefox 直接显示相同的视口位置。Chromium 不是，因此这个网站从左侧边栏估计开始，并在指针进入页面后立即纠正它。实际上，我想在我无法控制的页面上尝试相同的修复，因此我制作了 center, actually。它尝试自己找到居中的元素；如果猜错了，我可以选择一个。演示是查看差异的最简单地方。