Lobsters | 📄 原文链接 | 2026-08-06 收录

我们刚学会居中 div,浏览器又加了侧边栏

来源:seg6.space — 2026-08-04

📋 概述

作者写了一个浏览器扩展,用来在浏览器窗口而非 webview 里真正居中页面内容。他先用 grid + place-items 轻易把 .site 居中,却发现浏览器开着侧边栏时页面是在侧边栏旁剩下的矩形里居中,而不是窗口正中。起初他想用 outerWidth - innerWidth 算出浏览器 chrome 宽度来校正,但 DevTools 停靠一侧后无法分辨两侧各自占了多少。最终他从可信指针事件拿到 screenX/clientX 坐标,结合缩放定位出 webview 在窗口中的真实位置,算出精确的水平偏移。他把这个实验做成了可选加入的扩展 center, actually,由用户自行挑选要居中的元素。

🔑 核心要点

💡 金句

这个 div 依然完美居中——只是居中在了一个错误的矩形里。
← 返回 Lobsters 首页