文章摘要
文章讨论了网页居中布局的新挑战：当浏览器侧边栏打开时，传统居中方法会让内容偏离视觉中心。作者提出通过JavaScript计算浏览器窗口与网页视图的宽度差，用CSS平移属性将内容重新调整到实际视觉中心。
文章总结
文章标题：我们终于学会居中div了，浏览器却加上了侧边栏
核心内容：过去居中div需要复杂的CSS代码（如绝对定位加transform偏移），如今只需几行Grid布局即可实现。但作者发现，当浏览器侧边栏打开时，原本居中的内容会偏离窗口视觉中心——因为CSS居中是基于网页视图区域（webview），而非整个浏览器窗口。
作者通过JavaScript获取网页视图与浏览器窗口的宽度差，用translate属性将容器重新定位到窗口中心。但开发者工具（DevTools）的侧边栏会破坏这一简单方案，因为无法区分左右两侧的浏览器界面宽度。最终解决方案是利用鼠标指针事件：通过指针在屏幕和网页视图中的坐标差，精确计算出网页视图在窗口中的位置，从而实现真正的窗口居中。
作者将此功能打包为浏览器扩展"center, actually"，可自动检测页面居中元素并修正偏移，用户也可手动选择目标元素。该扩展默认不启用，需用户主动开启。
评论总结
根据评论内容，总结如下：
主要观点与论据：
反对视图外居中（主流观点）
- 多数评论者认为网站应基于视口（viewport）而非浏览器窗口居中，因为侧边栏覆盖内容或导致布局错乱。
- 关键引用：
- "I want sites to center within the viewport, not the browser window." (LocalH)
- "If I have a sidebar open, the site is now narrower, stop trying to be clever." (JoshTriplett)
支持窗口居中（少数观点）
- 部分用户偏好固定物理位置居中，尤其在使用平铺窗口管理器或固定侧边栏时。
- 关键引用：
- "The sidebar leaves that container visibly off the dead center of my screen." (seg6)
- "I happen to dislike that. This is a personal aesthetic preference for my particular setup." (seg6)
技术实现与兼容性问题
- 评论指出该方案存在闪烁、并发错误、侧边栏覆盖内容等缺陷，且在不同浏览器中表现不一致。
- 关键引用：
- "First off, there is this ugly flicker... Second, there is some concurrency problem." (krick)
- "The demo page doesn't work as described in Firefox... Correction resets to 'move pointer'." (boomlinde)
对设计理念的质疑
- 部分评论者批评网站过度干预浏览器默认行为，认为应尊重用户空间和浏览器原生功能。
- 关键引用：
- "Websites should be thought of as VMS and shouldn't be trying to reverse engineer host state." (ezwoodland)
- "This is just another example of overambitious anti-designers... replacing simple, sane defaults." (boomlinde)
平衡性说明：
- 主流观点（约70%评论）反对视图外居中，认为其破坏用户体验；
- 少数观点（约20%）支持特定场景下的窗口居中，但承认其局限性；
- 技术实现问题（约10%）被广泛提及，包括兼容性、闪烁和侧边栏覆盖。