我们刚学会居中 div,浏览器又加了侧边栏
来源:seg6.space — 2026-08-04
📋 概述
作者写了一个浏览器扩展,用来在浏览器窗口而非 webview 里真正居中页面内容。他先用 grid + place-items 轻易把 .site 居中,却发现浏览器开着侧边栏时页面是在侧边栏旁剩下的矩形里居中,而不是窗口正中。起初他想用 outerWidth - innerWidth 算出浏览器 chrome 宽度来校正,但 DevTools 停靠一侧后无法分辨两侧各自占了多少。最终他从可信指针事件拿到 screenX/clientX 坐标,结合缩放定位出 webview 在窗口中的真实位置,算出精确的水平偏移。他把这个实验做成了可选加入的扩展 center, actually,由用户自行挑选要居中的元素。
🔑 核心要点
- grid 与 place-items 让居中变得几乎无脑,但侧边栏打破了矩形
- 用outerWidth - innerWidth算 chrome 宽度的简单方案被 DevTools 打乱
- 从可信指针事件的 screenX/clientX结合缩放定位 webview 的真实位置
- 扩展 center, actually 提供可选加入的居中,而非网站替所有人决定
- 空间不足时校正应停止而非藏起内容,防止内容被遮挡
💡 金句
这个 div 依然完美居中——只是居中在了一个错误的矩形里。
👍 0
👎 0
← 返回 Lobsters 首页