刚学会居中 div，浏览器又加了侧边栏
We finally learned to center a div, then browsers added sidebars
曾经，居中一个 div 需要繁琐的绝对定位和 transform 计算，如今用 Grid 布局一行代码就能搞定。但当我在带侧边栏的浏览器中打开页面时，发现 div 虽然完美居中，却是在错误的矩形区域内。我尝试用 JavaScript 计算 window.innerWidth 和 window.outerWidth 的差值来修正偏移，结果 DevTools 的打开又让布局再次失衡。最终，我利用 pointer 事件获取屏幕坐标与视口坐标的差值，成功定位了 webview 在窗口中的真实位置。基于这个思路，我开发了 center, actually 工具，它能自动识别并修正页面上的居中元素，让布局在任何浏览器 UI 下都能保持真正的居中。
那个 .site div 依然完美居中，只是居中在了错误的矩形框里。
HN 评论区
16- JoshTriplett
这个网站目前的做法，在我随机打开侧边栏时，似乎会导致以下两种结果之一：
1) 侧边栏覆盖了内容，而内容右侧却留出了空白；
2) 内容被推到了屏幕右边缘之外，左侧留下了大片空白。
这两种情况都是错的。如果我打开了侧边栏，网站应该变窄，别再自作聪明了。
我第一反应是：浏览器为什么要给网站提供这些信息？我们能不能阻止它？
- kccqzy
这可能算是某种艺术作品的奇怪需求，但我绝对无法想象一个网站会根据浏览器窗口而不是视口来居中 div。这看起来不对劲，感觉也不对劲。
- stkdump
有趣的是，我完全无法复现这个效果。我用的是 Firefox，打开侧边栏后，页面内容会像其他网站一样，在剩余的视口宽度上居中。我也用 Edge 测试过，结果相同。在 Edge 的自动折叠模式（即非粘性垂直标签页）下，我确实看到了描述中的效果，但这和其他网站的表现一样。我原本以为 Edge 的结果会很糟糕，因为它右侧有一些侧边栏，我以为这个页面会朝错误的方向进行补偿。没装 Chrome，所以不知道它会不会有不同表现。
顺便提一下，我喜欢浏览器的默认行为：以视口为中心，而不是以窗口为中心，把侧边栏当作覆盖在页面上的层。每当网站用自己的小工具这么做时，我都很讨厌，因为它们往往不会把内容移开，导致内容不可读，除非你滚动到这些小工具范围之外——而这通常根本做不到。即使能做到，实际可用的屏幕空间也只剩下一小部分。
每当这个问题烦到我了（主要在移动端），我就用 kill sticky bookmarklet 来修复。
- PetitPrince
截图会有帮助，因为（你可能会惊讶地发现）究竟哪种行为模式是“错误”的，其实并不完全明显。
总之，我觉得它目前的表现并不友好（完全不像我会想在任何地方复用的东西）。在 Firefox 上测试，打开左侧的书签面板。首先，有一个很难看的闪烁，因为浏览器先渲染了“错误”版本，然后你的 JS 才“修复”它。其次，似乎有个并发问题，因为我反复打开和关闭书签面板，结果 somehow 同时渲染出了两种版本：一种是视口居中，另一种是被侧边栏覆盖。
还有，正如其他人所说，我也认为让侧边栏覆盖网页内容绝对荒谬，我预见自己永远都不会想要这种行为。但这由你决定。
- krick
我一开始完全不知道这帖子在说什么，因为我禁用了 JS，所以打开书签面板时似乎没什么特别的事发生。这看起来简直太蠢了。我不知道为什么有人会让内容可能被无关的 UI 元素覆盖。