We finally learned to center a div, then browsers added sidebars
4 hours ago
- 过去，居中一个 div 需要使用绝对定位和变换，但现在可以轻松地用 CSS 网格和 place-items 来实现。
- 作者的网站只在 webview 内居中显示，没有考虑到浏览器侧边栏或 DevTools 面板。
- 最初的修复方案是使用 JavaScript 计算浏览器 chrome 的宽度并应用平移，但当 DevTools 打开时，由于总宽度差被分配到了两侧，导致方案失败。
- 最终的解决方案利用指针事件来确定视口在屏幕上的位置，从而能够根据浏览器 UI 布局准确计算偏移量。
- 作者创建了一个名为“center, actually”的工具，可以将此修复应用于任何页面，自动检测居中元素或允许手动选择。