多媒体控制栏水平居中需依附父容器布局：自定义栏用flex+justify-content:center；原生controls须包裹后margin:0 auto并设video为block；text-align仅对inline内容有效；绝对定位用left:50%+transform。
多媒体控制栏（比如 <video></video> 自带的 controls，或自定义的播放/音量/进度条容器）水平居中，关键不是“把它塞进页面中间”，而是明确它在哪个父容器里、以什么方式渲染——它通常是行内级或 flex 项目，不是独立块级元素。
自定义控制栏用 display: flex + justify-content: center
如果你自己写了 <div class="controls"> 包裹按钮和滑块，这是最稳的方案：
<ul>
<li>给 <code>.controls 的直接父容器（比如 .player）设 display: flex 和 justify-content: center
width: 100% 或 max-width: 600px），否则 flex 会收缩到内容宽度.controls 上设 float 或 position: absolute，否则它会脱离 flex 主轴justify-content: center 依然有效，不影响子项对齐
<video controls></video> 自带控件无法直接居中，得靠包裹容器
浏览器原生的 controls 是 UA shadow DOM 内部渲染的，你不能用 CSS 直接选中它。所以：
- 必须把
<video></video>放进一个有明确宽度的块级容器里（比如<div class="video-wrapper">） <li>对该容器用 <code>margin: 0 auto实现水平居中——前提是video本身没设display: block以外的值 - 注意：默认
<video></video>是 inline-level 元素，所以要先加display: block，否则margin: 0 auto不生效 - 示例：
.video-wrapper { width: 80%; margin: 0 auto; } video { display: block; width: 100%; } - 给父容器设
text-align: center - 确保所有按钮都保持
display: inline或inline-block（inline-block要小心 HTML 换行产生的空格间隙） - 别在按钮上设
float或position: absolute，否则text-align失效 - 常见错误：给
<div class="controls"> 自己设 <code>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 最新两个大版本。 - 父容器（如
用 text-align: center 时，只对行内内容起效
如果你的控制栏是纯图标+文字按钮（<button></button>、<span></span>），且父容器是块级、未启用 flex/grid，那可以：
