仪表盘图表元素对不齐中心是因为未配transform-origin和锚点偏移，导致指针绕左上角转；必须设容器position: relative、宽高相等，指针用position: absolute+top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); transform-origin: 50% 50%，且禁用其他transform值。
仪表盘图表元素为什么总对不齐中心
因为绝大多数人直接用 transform: rotate() 却没配 transform-origin 和锚点偏移，导致指针绕着左上角转、刻度环错位、数值标签飘在表盘外。核心不是“加了 transform”，而是“旋转原点是否落在物理表盘中心”。
- 必须给图表容器（如
<div class="gauge">）设 <code>position: relative，且宽高相等、无边框干扰 - 所有可动元素（指针、游标、动态刻度）都要是独立
<div> 或 <code><svg></svg>子元素，不能塞在同一个 DOM 里靠 margin 挤 - 每个指针元素需同时设置：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); transform-origin: 50% 50%; - 删掉任何其他 transform 值（比如 scale 或 skew），否则
rotate会被覆盖或叠加错乱 - 对
<td> 类单元格：必须加 <code>background-origin: content-box，否则默认按padding-box计算，而border-collapse: collapse会让 padding 实际为 0 - 必须显式声明
width和height（哪怕用min-width/min-height），不能靠内容撑开；否则背景定位像素值失去参照系 - 整个
<table> 要加 <code>table-layout: fixed，否则列宽浮动会导致同一列内多个单元格的 background 定位基准不统一 - 如果用 flex/grid 布局替代 table，
background-position就不会漂移，但要注意父容器是否设置了align-items: stretch拉高子项 - ECharts 容器必须固定尺寸：
width: 600px; height: 400px;，不能只写max-width或百分比 - 初始化后必须手动调用
chart.resize()，且要在 DOM 渲染稳定后执行（推荐用requestAnimationFrame(() => chart.resize())） - Canvas 元素要同时设置属性和样式：
<canvas width="600" height="400" style="width: 600px; height: 400px"></canvas>；两个 width/height 必须严格一致，否则绘图坐标被拉伸 - 需要微调位置时，优先用
transform: translateX(2px) translateY(-1px)，而不是margin-left或top，避免触发重排 - KPI 主数字和单位文字必须分层：主数字用
<span class="value">12345</span>，单位用<span class="unit">人</span> -
.value设display: inline-block; vertical-align: bottom;，.unit设vertical-align: baseline;并配合line-height: 1.2 - 禁用
em或rem做单位文字尺寸，改用px或clamp()：例如font-size: clamp(12px, 2.5vw, 24px) - 整行 KPI 容器加
overflow: hidden，防止单位文字因渲染抖动溢出边界
background-position 在仪表盘图标上失效怎么办
仪表盘常用 sprite 图做状态图标（如 OK / WARN / ERROR），但放在 <td> 或 <code><div class="status"> 里时，<code>background-position 经常偏移 1–2px——这不是代码写错，是表格单元格和弹性容器的盒模型行为不一致。
如何用 CSS 精确控制 ECharts 或 Canvas 图表的像素级偏移
ECharts 容器一旦被设为 display: flex 或嵌套在 grid 区域里，left/top 偏移就容易被重置；Canvas 则更敏感——canvas.width 和 CSS width 不一致时，绘图坐标系会整体缩放错位。
大屏看板中 KPI 数值与单位文字的像素对齐陷阱
很多人用 font-size: 6vw 控制数字大小，结果在 3840×2160 屏上，“在线人数 12,345 人”里“人”字垂直偏移 3px——不是字体问题，是 baseline 对齐和 line-height 混用导致的。
立即学习“前端免费学习笔记（深入）”；
