使用 innerhtml 动态显示 range 滑块值时，数字位数变化会导致文本偏移；通过封装容器、合理设置 width 和 text-align: center 可彻底解决居中问题。
在 Web 开发中，用 配合 innerHTML 实时展示数值（如 0、10、100）非常常见，但一个典型陷阱是：当数值从个位（如 “5”）变为两位或三位（如 “50”、”150″）时，因字符宽度不同且缺乏统一基准，.dotDisplay-show 元素无法保持视觉居中——尤其当它与下方的 .underline 对齐时，错位会非常明显。
根本原因在于：你当前采用绝对定位 + 固定 left 值的方式（如 left: 255px），这使 .dotDisplay-show 的位置完全脱离内容尺寸，而数字字符串本身无固定宽度。因此 “0” 和 “200” 占据的水平空间不同，却强制置于同一像素坐标，必然偏移。
✅ 正确解法是：将相关元素封装进语义化容器，并利用 CSS 内置的流式布局能力实现自适应居中。以下是优化后的完整实现：
