We finally learned to center a div, then browsers added sidebars

你以为网页居中已经很简单了？现在浏览器侧边栏又让这个问题变得复杂。有个开发者发现，用最新CSS代码能轻松让网页内容居中，但一打开浏览器侧边栏，居中就偏了——因为网页视口被侧边栏挤窄，居中是相对于剩余空间，而不是整个窗口。他先用JavaScript计算窗口和视口宽度差来修正，结果打开开发者工具又失效了，因为工具面板也占宽度，无法分清左右偏移。最后靠鼠标指针的屏幕坐标和网页坐标，才算出视口在窗口中的精确位置。他把这个修复做成了浏览器扩展“center, actually”，能自动找到网页里居中的元素并重新对齐，也支持手动选择。这更像一个技术彩蛋，对普通人来说，其实很难察觉网页居中有没有偏差。但它提醒我们一个道理：很多看似完美的技术方案，一旦遇上真实世界的各种“边角料”——比如侧边栏、开发者面板——就会失灵。它真正的影响在于，让我们看到开发者如何见招拆招，也预示着未来浏览器或许会更智能地处理多窗口场景。当然，如果你恰好习惯开着侧边栏浏览网页，装上这个扩展，至少能让那些极简风格的居中页面看起来更顺眼了。

Centering a div used to require this little ritual: .thing { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } These days, it is almost disappointingly easy: body { display: grid; min-height: 100dvh; place-items: center; } I used that for the .site div you’re reading. It looked centered until I opened it in a browser with the sidebar visible. This is a fairly specific itch. I use one browser window tiled directly in front of me, usually with its sidebar open. When a site deliberately centers a narrow layout, I want it at the dead center of that window, not the space left over beside the sidebar. The .site div was still perfectly centered, just inside the wrong rectangle. I figured the fix would be simple enough: JavaScript knows the width of both the webview and the browser window. window.innerWidth // the webview window.outerWidth // the whole browser window const browserChrome = window.outerWidth - window.innerWidth; With the sidebar on the left, I could move .site back by half of that difference: const shift = -browserChrome / 2; .site { translate: var(--window-center-shift, 0px); } The sidebar still narrows the webview and the page still reflows normally. This only repositions the container that was already centered. If there is not enough visible space for it, the correction should stop rather than hide content. That worked, right up until I opened DevTools. devtools ruins the easy fix Mine is docked on the right, so the width difference now included browser UI on both sides. It gave me the total, but no way to tell how that total was split. What finally gave me the missing coordinate was the pointer. A trusted pointer event knows where it is on the screen and where it is inside the webview, which is enough to locate the webview inside the window: 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 exposes the same viewport position directly. Chromium does not, so the extension starts with the selected sidebar position and corrects it as soon as the pointer enters the page. center, actually I wanted to try the same fix on pages I do not control, so I made center, actually. It tries to find the centered element itself; if it guesses wrong, you can pick one. This is where the preference belongs: opt-in, rather than chosen by a site for everyone. The demo is the simplest place to see the difference.