多媒体控制栏水平居中需依附父容器布局：自定义栏用flex+justify-content:center；原生controls须包裹后margin:0 auto并设video为block；text-align仅对inline内容有效；绝对定位用left:50%+transform。
多媒体控制栏（比如 <video> 自带的 controls，或自定义的播放/音量/进度条容器）水平居中，关键不是“把它塞进页面中间”，而是明确它在哪个父容器里、以什么方式渲染——它通常是行内级或 flex 项目，不是独立块级元素。
自定义控制栏用 display: flex + justify-content: center
如果你自己写了 <div class="controls"> 包裹按钮和滑块，这是最稳的方案：
- 给
.controls的直接父容器（比如.player）设display: flex和justify-content: center - 确保该父容器宽度足够（比如
width: 100%或max-width: 600px），否则 flex 会收缩到内容宽度 - 不要在
.controls上设float或position: absolute，否则它会脱离 flex 主轴 - 如果控制栏内部也用了 flex 布局（如横向排列按钮），
justify-content: center依然有效，不影响子项对齐
<video controls> 自带控件无法直接居中，得靠包裹容器
浏览器原生的 controls 是 UA shadow DOM 内部渲染的，你不能用 CSS 直接选中它。所以：
- 必须把
<video>放进一个有明确宽度的块级容器里（比如<div class="video-wrapper">） - 对该容器用
margin: 0 auto实现水平居中——前提是video本身没设display: block以外的值 - 注意：默认
<video>是 inline-level 元素，所以要先加display: block，否则margin: 0 auto不生效 - 示例：
.video-wrapper { width: 80%; margin: 0 auto; } video { display: block; width: 100%; }
用 text-align: center 时，只对行内内容起效
如果你的控制栏是纯图标+文字按钮（<button>、<span>），且父容器是块级、未启用 flex/grid，那可以：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
text-align: center - 确保所有按钮都保持
display: inline或inline-block（inline-block要小心 HTML 换行产生的空格间隙） - 别在按钮上设
float或position: absolute，否则text-align失效 - 常见错误：给
<div class="controls">自己设text-align: center，但它里面全是display: flex子项——此时无效
绝对定位控制栏时，left: 50% + transform: translateX(-50%) 是唯一可靠写法
当控制栏需要脱离文档流（比如悬浮在视频上方），必须配合定位上下文：
- 父容器（如
.player）必须设position: relative - 控制栏自身设
position: absolute; left: 50%; transform: translateX(-50%) - 别用
margin-left: -120px这类固定偏移——控件宽度可能随主题或语言变化 - 如果控制栏高度不固定（比如含多行文字），垂直方向要用
top: 50%; transform: translate(-50%, -50%) - 注意：
transform百分比基于元素自身宽高，不是父容器，所以安全
真正容易被忽略的是：控制栏是否被父容器的 overflow: hidden 或 flex-wrap: wrap 截断；还有移动端上某些 WebView 对 transform 的兼容性波动——测试时至少覆盖 Chrome Android 和 Safari iOS 最新两个大版本。
