audio/video 控件条由浏览器原生渲染，无法用CSS样式化或调整内部布局；margin: 0 auto 对 inline 元素无效，需设 display: block + width 才能居中容器；唯一可靠方式是用 Flex 布局居中整个播放器元素。
<audio> 和 <video> 的控制条（controls）是浏览器内置的 UI，无法直接用 CSS 选中或样式化——controls 属性开启后，整个控件面板由 UA（User Agent）渲染，::-webkit-media-controls 等伪元素仅在部分 Chromium 内核中有限支持，且行为不稳定、无标准、不跨浏览器。
为什么给 <audio> 加 margin: 0 auto 没反应？
因为默认情况下 <audio> 是 display: inline 元素，而 margin: 0 auto 对行内元素完全无效。它既不会触发块级格式化上下文，也不参与外边距计算。
- 错误写法：
<audio controls style="margin: 0 auto;">—— 不生效 - 必须先转成块级：
display: block，再设宽度和自动外边距 - 但即使加了
width: 300px; display: block; margin: 0 auto;，也只居中整个播放器容器，控件条本身位置仍由浏览器决定，无法调整其内部按钮排布 - 父容器若为
flex或grid，margin: auto会被忽略
真正能控制的只有播放器容器的位置，不是控件条
你唯一能可靠干预的，是 <audio> 或 <video> 标签这个“盒子”在页面中的定位。控件条的尺寸、间距、图标样式全部不可 CSS 覆盖（除极个别 WebKit 前缀伪类，如 ::-webkit-media-controls-play-button，但它们：
- 仅在 Safari / Chrome 有效，Firefox/Edge 完全不识别
- 一旦浏览器更新可能被移除（例如 Chrome 120+ 已废弃部分伪类）
- 无法修改布局结构，比如把音量滑块移到右侧
- 不支持响应式重排，
max-width对控件条内部无效
推荐做法：用 Flex 布局居中整个播放器，别碰控件条
这是目前最稳定、可维护、跨浏览器的方式。目标不是“让控件条居中”，而是“让播放器整体在视口或容器中居中显示”：
立即学习“前端免费学习笔记（深入）”；
- 包裹一层
<div>，设display: flex; justify-content: center; align-items: center; - 给该
<div>显式高度（如height: 100vh或固定值），否则align-items: center垂直方向不生效 -
<audio>或<video>本身无需设width，但建议加max-width: 100%防溢出 - 避免在播放器上写
float、position: absolute或display: inline-block，会干扰 Flex 行为
示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<audio controls max-width="100%">
<source src="song.mp3" type="audio/mpeg">
</audio>
</div>
真正容易被忽略的一点：你永远不能通过 CSS 改变浏览器原生控件条的内部结构或对齐方式。所谓“居中音视频控制元素”，本质是误解了控制条的渲染机制——它不是一个可样式化的 DOM 子树，而是一段由 UA 渲染引擎动态生成的 UI 片段。能做的，只有把它所在的那个 HTML 元素摆到你想放的位置。
