文字/线条发虚是因亚像素渲染导致插值模糊，需通过触发独立图层、改用 Flex 居中、手动取整坐标或校准 DPR 等方式对齐物理像素网格。
transform: translate(-50%, -50%) 导致文字/线条发虚
这不是居中逻辑错了，而是浏览器在亚像素坐标上渲染时做了插值——top: 50% 和 left: 50% 算出来可能是 123.4px，再叠加 translate(-50%, -50%)，最终绘制点落在物理像素间隙里。
- 用
getBoundingClientRect()检查元素实际 top/left 是否为整数：如果不是，说明存在亚像素偏移 - 强制对齐：给居中元素加
will-change: transform或backface-visibility: hidden，触发独立图层，减少合成模糊 - 更稳妥的写法是避免 transform 居中，改用
display: flex+justify-content/align-items，它默认对齐到设备像素网格 - 若必须用绝对定位，可配合
Math.round()手动修正：element.style.left = Math.round(x) + 'px'
Canvas 绘制后居中但内容模糊
Canvas 的模糊常被误认为是居中问题，其实是 DPI 适配没做对——canvas.width/canvas.height 和 CSS 尺寸不匹配，导致浏览器拉伸渲染。
- 必须同时设置两组尺寸：
canvas.width和canvas.height要乘以window.devicePixelRatio；canvas.style.width和canvas.style.height保持视觉尺寸（如'600px'） - 缩放上下文后，绘图坐标仍按 CSS 像素写，但要确保所有坐标取整：
ctx.fillRect(10, 10, 100, 50)没问题，ctx.fillRect(10.3, 10.7, 100, 50)就会糊 - 1px 线条尤其敏感：画线前手动偏移
+0.5，例如ctx.moveTo(10.5, 20.5)，让中线落在像素中心
SVG 图形居中后边缘毛边
SVG 模糊和居中无关，根源是坐标没对齐像素网格——哪怕 viewBox 写得再规范，x/y/width/height 含小数就会触发亚像素渲染。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 内联 SVG 优于
<img src="icon.svg">，前者能响应 CSS 像素对齐，后者当位图处理 - 检查所有属性值：把
<rect x="0.5" y="0.5">改成<rect x="1" y="1">；stroke-width优先用偶数（如2），避免描边跨像素居中 - 加
shape-rendering="crispEdges"强制关闭抗锯齿（适合图标、线条），但别用于含渐变或文本的 SVG - 高 DPR 设备下，用
Math.round(size * window.devicePixelRatio) / window.devicePixelRatio动态校准尺寸
html2canvas 截图居中但内容偏移+模糊
这不是 CSS 居中失效，而是 html2canvas 在离屏渲染时丢失了滚动偏移、transform 状态和 DPI 上下文。
立即学习“前端免费学习笔记（深入）”；
- 偏移主因是
getBoundingClientRect()返回视口坐标，但截图时页面可能已滚动——显式传入scrollX/scrollY参数，或截图前临时滚动到0,0 - fixed 元素会被错算：截图前临时改成
position: absolute，并用getBoundingClientRect()设置top/left - 模糊来自未适配 DPR：html2canvas 默认不处理 devicePixelRatio，需手动放大 canvas 内部尺寸，并调用
ctx.scale(dpr, dpr) - 避免在截图目标上用
transform: scale()，html2canvas 解析能力有限，容易失真
真正卡住人的不是“怎么居中”，而是居中后那些看不见的像素偏移——它藏在 devicePixelRatio 的小数里、藏在 getBoundingClientRect() 的返回值里、藏在 stroke-width 是奇数还是偶数的细节里。
