使用 innerhtml 动态更新 range 滑块数值时，若数字位数变化（如从 “5” 变为 “100”），元素会因宽度不固定而偏移；通过包裹容器 + `text-align: center` + 百分比宽度控制，可实现数值始终精准居中对齐。
要解决数值显示偏移问题，核心在于解除绝对定位对单个元素的硬编码控制，转而采用语义化、响应式更强的布局结构：将 .dotDisplay 和 .underline 封装进一个共同父容器（.container），并利用 CSS 的继承与流式特性实现动态居中。
✅ 正确结构与样式（推荐方案）
HTML 结构（注意顺序）：
--
? 说明：.underline 放在 .dotDisplay 下方，符合视觉层级逻辑；避免用 z-index 或 margin-top 强行调整位置，保持结构清晰。
CSS 样式（关键修复点）：
