图表容器内html元素居中需避免操作内部结构，应将元素置于容器外层并用flex或绝对定位+transform实现；容器须设明确宽高和position:relative，且注意overflow:hidden可能导致裁剪。
复杂图表容器里子元素水平垂直居中
直接给图表容器（比如 <div id="chart">）加 <code>text-align: center 或 margin: 0 auto 基本无效——图表库（如 ECharts、Chart.js、D3）渲染后，内部 DOM 结构常含绝对定位、SVG 元素或 canvas，这些会脱离文档流，传统居中手段失效。
Flex 布局对图表容器本身生效，但别动图表内部
居中目标不是“图表数据”，而是你额外插入的 HTML 元素（比如遮罩层、加载提示、标题文字），它们通常作为图表容器的**同级子元素**或**伪覆盖层**存在。关键：不要试图修改图表库生成的内部结构，而是把你要居中的元素放在图表容器外层，并用 Flex 控制它相对于图表容器的位置。
- 确保图表容器有明确尺寸（
width和height），否则align-items无基准 - 外层包裹一个
position: relative容器，图表和你的 HTML 元素都作为其子元素 - 给该外层容器设
display: flex; justify-content: center; align-items: center; - 你的 HTML 元素（如
<div class="overlay">加载中</div>）必须是该 Flex 容器的**直系子元素**，不能嵌套在图表 div 内部
绝对定位 + transform 是最稳妥的覆盖层居中方案
当图表容器本身无法改布局（比如第三方组件不允许加 Flex），或你需要精确叠加在图表正中央（包括响应式缩放后仍保持居中），用绝对定位配合 transform 是唯一可靠方式。
- 图表容器必须设
position: relative（否则top: 50%会相对视口定位） - 你的 HTML 元素加：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 注意 z-index：确保你的元素在图表图层之上（ECharts 默认 canvas z-index 为 0，可设
z-index: 10） - 不依赖宽高：即使元素内容动态变化（如文字长度不定），也能精准居中
避免踩坑：SVG 和 canvas 内部文本/图形的居中逻辑完全不同
如果你试图在 SVG 里用 <text></text> 居中，或在 canvas 上用 fillText() 居中，这不是 CSS 居中问题，而是绘图 API 的坐标计算问题：
- SVG 中
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"></text>才是真居中 - canvas 中需手动算坐标：
ctx.fillText(text, width / 2 - textWidth / 2, height / 2 + fontSize / 3) - 这些操作和外部 HTML 元素的 CSS 居中无关，混用会导致定位错乱
真正容易被忽略的是：图表容器是否设置了 overflow: hidden。一旦开启，用 transform: translate() 居中的元素若超出容器边界，会被裁剪——此时要么关掉 overflow，要么确保你的居中元素尺寸可控。
