video进度条的thumb默认不居中，因其是伪元素而非独立DOM节点，需通过position: relative + top: 50% + transform: translateY(-50%)实现垂直居中，水平方向由浏览器自动对齐；Firefox需额外用margin-top微调，且必须确保track与thumb尺寸匹配、父容器无overflow:hidden干扰。
video进度条圆点（thumb）默认不居中？先确认它是不是的伪元素
HTML5 <input type="range"> 是视频进度条底层实现的核心，浏览器原生的拖拽圆点（thumb）本质是该元素的伪类 ::-webkit-slider-thumb（Chrome/Safari）或 ::thumb（Firefox）。它**不是独立DOM节点**，不能用 margin: auto 或 text-align: center 居中——这些对伪元素无效。
让圆点在进度条轨道上垂直/水平居中，关键靠 transform + top/left
圆点默认“贴底”或“偏上”，视觉上看起来没居中，是因为它的基线（baseline）和轨道高度不匹配。真正生效的方式是重置定位再用 transform 微调：
- 必须给
input[type="range"]设置position: relative - 对
::-webkit-slider-thumb设置position: relative，然后用top: 50%+transform: translateY(-50%)垂直居中 - 水平方向不用动——浏览器已保证圆点中心与轨道中心对齐，但若轨道本身没居中，需单独处理父容器
- Firefox 需额外加
::thumb { margin-top: -5px }类似手动偏移（因不同引擎渲染盒模型差异）
圆点被裁切或错位？检查 track 和 thumb 的尺寸与 overflow
常见现象：圆点一半消失、边缘被截断、拖动时跳动。根本原因不是居中逻辑错，而是父级容器或 track 自身限制了空间：
-
input[type="range"]的height必须 ≥ thumb 的width/height，否则会被 overflow hidden 截掉 - 不要只设
height，同时显式设line-height: 1和vertical-align: middle防止行内对齐干扰 - track（滑轨）用
::-webkit-slider-runnable-track设置height时，务必比 thumb 小一点（例如 thumb 宽 16px，track 高 8px），否则 thumb 会撑开轨道导致错位 - 避免在父容器上设
overflow: hidden—— 圆点超出部分会被剪掉，看起来像“没居中”
真正要居中的其实是整个进度条组件，不是单个圆点
用户说“圆点居中”，实际常指“进度条整体在页面里水平居中”。这时候重点不在 thumb，而在包裹它的容器：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex+justify-content: center包裹<input type="range">最可靠 - 别依赖
text-align: center—— input 是替换元素，不响应 text-align - 如果进度条嵌套在
<video></video>controls 里，原生控件会覆盖自定义样式；必须禁用默认 controls，自己用 JS 绑定timeupdate和seeking手动控制 - 移动端要注意：iOS Safari 对 range thumb 的缩放支持差，
transform: scale()可能失效，优先用固定宽高+padding 模拟
圆点居中问题，90% 出在没意识到它是伪元素、或忽略了 track/thumbnail 尺寸链的耦合关系。真正在意效果时，与其反复调 top，不如先确保容器有足够空间、且伪元素定位上下文干净。
