我们终于学会了让 div 居中，然后浏览器又加了侧边栏

# 我们终于学会了居中一个 div，然后浏览器又加了侧边栏 来源：http://seg6.space/posts/center-div/ 过去，让一个 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 知道 webview 和浏览器窗口的宽度。 `` window.innerWidth // webview 的宽度 window.outerWidth // 整个浏览器窗口的宽度 const browserChrome = window.outerWidth - window.innerWidth; `` 当侧边栏在左侧时，我可以将 `.site` 往回移动这个差值的一半： `` const shift = -browserChrome / 2; `` `` .site { translate: var(--window-center-shift, 0px); } `` 这个方法一直有效，直到我打开了 DevTools。 我的 DevTools 停靠在右侧，所以现在的宽度差异包含了浏览器两侧的 UI。它给了一个总数，却无法告诉我这个总数是怎么分配的。 最终提供那个缺失坐标的是指针（pointer）。一个可信的 pointer 事件知道它在屏幕上的位置，也知道它在 webview 中的位置，这足以确定 webview 在窗口中的位置： `` 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 我想在我无法控制的页面上尝试同样的修正，所以我做了 **center, actually** (https://github.com/seg6/center-div)。它会自己找出被居中的元素；如果猜错了，我可以手动选一个。演示页面 (https://seg6.space/center-div/) 是查看差异的最简单的地方。