音频元素水平居中可通过四种CSS方法实现：一、父容器设text-align:center；二、父容器用flex布局并设justify-content:center；三、音频设display:block和margin:0 auto；四、用position:absolute配合transform:translateX(-50%)。
如果您在网页中嵌入了HTML5音频元素，但发现它默认左对齐或未按预期居中显示，则可能是由于容器未设置合适的CSS布局方式。以下是实现音频元素水平居中显示的多种方法：
一、使用 text-align: center
该方法适用于将 <audio> 元素作为行内级元素处理，通过父容器的文本对齐属性使其居中。需确保音频元素未被设置为块级或浮动。
1、在HTML中创建一个包裹 <audio> 的 <div> 容器。
2、为该 <div> 添加内联样式 style="text-align: center;" 或在CSS中定义对应类名。
立即学习“前端免费学习笔记（深入）”；
3、确保 <audio> 标签未设置 display: block 或 float 属性，以维持其默认的行内表现。
4、添加 controls 属性使播放控件可见：<audio controls><source src="audio.mp3"></audio>。
二、使用 CSS Flex 布局
Flex 布局提供更精确的控制能力，可同时实现水平与垂直居中，且兼容现代浏览器。需将父容器设为 flex 容器，并设置主轴与交叉轴对齐方式。
1、为包裹 <audio> 的父元素添加 display: flex 样式。
2、添加 justify-content: center 实现主轴（默认为水平）居中。
3、添加 align-items: center 实现交叉轴（默认为垂直）居中（若需垂直居中则必须设置高度或最小高度）。
4、为避免音频控件换行，可添加 flex-shrink: 0 防止其被压缩。
三、使用 margin: auto 配合 display: block
当音频元素设为块级时，可通过自动外边距实现水平居中。此方法简单直接，但仅支持水平居中，不控制垂直位置。
1、为 <audio> 元素添加 display: block 样式。
2、设置 margin-left: auto 和 margin-right: auto，或简写为 margin: 0 auto。
3、确保父容器具有明确宽度（如 width: 100%），且无浮动或绝对定位干扰。
4、注意：必须指定音频元素的宽度（如 width: 300px），否则 auto 外边距无效。
四、使用 position + transform
该方法通过绝对定位配合位移实现居中，适用于需要脱离文档流或精确定位的场景，但需父容器有相对定位上下文。
1、为 <audio> 的直接父元素添加 position: relative。
2、为 <audio> 添加 position: absolute。
3、设置 left: 50% 将元素左边缘移至父容器中心。
4、添加 transform: translateX(-50%) 将元素自身向左平移其宽度的一半。
5、若需同时垂直居中，还需设置 top: 50% 和 transform: translate(-50%, -50%)。
