audio默认为行内元素，margin: 0 auto无效；需设display: block或用flex（justify-content/align-items）、text-align: center（仅水平）、绝对定位+transform等方案居中，其中flex最稳妥。
audio 元素默认是行内元素，直接加 margin: 0 auto 不生效
很多人试过给 <audio></audio> 直接写 margin: 0 auto，发现没反应——因为它的默认 display 是 inline，而 auto 外边距只对块级元素有效。必须先显式设成 block 或用其他布局方式接管。
用 flex 布局居中最稳妥，兼容现代浏览器
父容器设 display: flex，再配 justify-content: center（水平）和 align-items: center（垂直），一步到位：
div.audio-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 垂直居中需父容器有高度 */
}
- 不需要给
<audio></audio>设宽高，它会自然撑开 - 如果父容器没设高度，
align-items: center对垂直居中无效 - 避免在
<audio></audio>上写flex-shrink: 0，除非你真遇到控件被压缩的问题
text-align: center 适合简单场景，但要注意 display 冲突
只想要水平居中、不关心垂直位置时，最轻量的方法是让父容器用 text-align: center：
div.audio-parent {
text-align: center;
}
-
<audio></audio>必须保持默认的inline或设为inline-block - 一旦写了
display: block，这个方法就失效了 - 不能用于垂直居中，且父容器若有其他行内内容，可能一并被居中
绝对定位 + transform 容易漏掉定位上下文
用 position: absolute 居中时，常见错误是忘了给父容器加 position: relative：
div.audio-container {
position: relative;
height: 200px; /* 需要高度才能看到垂直效果 */
}
audio {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- 没设
position: relative在父容器上，left: 50%会相对于 body 定位，容易跑偏 -
transform必须写全translate(-50%, -50%)，只写X只能水平居中 - 脱离文档流后，后续元素会“无视”它的存在，布局可能错乱
实际项目里，flex 是首选；但如果只是临时调试或嵌入老页面，text-align 更快。真正容易被忽略的是：audio 元素本身没有固有宽度，很多居中方案依赖它被当作“有尺寸的盒子”来处理，而它默认只按控件渲染宽度，不是 100% 宽——这点在响应式断点下尤其容易出偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
