在html5页面开发中，audio标签是常用的音频播放控件，默认情况下它会按照文档流的正常位置排列，很多时候我们需要将音频控件在容器中水平居中显示，此时可以通过CSS的flex布局或者text-align:center属性来实现，两种方案各有适用的场景，下面分别介绍具体的实现方式。
方案一：使用text-align:center实现音频居中
text-align:center是CSS中控制内联元素水平对齐的属性，audio标签属于内联替换元素，默认会被父容器的text-align属性影响，因此可以将audio的父容器设置text-align:center，就能让音频控件水平居中。
这种方案适合父容器只需要控制内联元素对齐，不需要调整其他块级元素布局的简单场景，实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5音频text-align居中示例</title>
<style>
/* 父容器设置text-align:center */
.audio-container {
text-align: center;
padding: 20px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="audio-container">
<!-- audio标签为内联替换元素，会被父容器的text-align影响 -->
<audio controls>
<source src="http://ipipp.com/audio/test.mp3" type="audio/mpeg">
您的浏览器不支持audio标签
</audio>
</div>
</body>
</html>
注意事项
- text-align:center会影响父容器内所有内联元素，如果容器内还有其他内联元素需要单独调整对齐方式，需要额外给对应元素设置text-align覆盖。
- 如果父容器本身有默认的text-align样式，需要先清除原有样式再设置，避免冲突。
方案二：使用CSS flex实现音频居中
flex布局是现代CSS中常用的弹性布局方案，通过设置容器的display为flex，再配合justify-content属性，可以精准控制子元素的水平对齐方式，也能实现audio标签的居中，而且不会像text-align那样影响其他内联元素的样式。
这种方案适合需要同时调整多个子元素布局，或者父容器内既有块级元素又有内联元素的复杂场景，实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5音频flex居中示例</title>
<style>
.audio-container {
display: flex;
/* justify-content控制主轴方向对齐，center为居中 */
justify-content: center;
padding: 20px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="audio-container">
<audio controls>
<source src="http://ipipp.com/audio/test.mp3" type="audio/mpeg">
您的浏览器不支持audio标签
</audio>
</div>
</body>
</html>
flex布局的扩展调整
如果需要同时实现垂直和水平居中，可以给flex容器添加align-items: center属性，同时设置容器的固定高度，就能让音频控件在容器中完全居中，代码如下：
.audio-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f5f5f5;
}
两种方案的选择建议
| 方案 | 适用场景 | 优缺点 |
|---|---|---|
| text-align:center | 简单内联元素对齐，不需要调整其他布局 | 实现简单，代码量少；但会影响容器内所有内联元素，灵活性低 |
| CSS flex | 复杂布局，需要同时调整多元素对齐 | 灵活性高，不影响其他元素样式；但需要了解flex基础属性，代码稍多 |
实际开发中可以根据自己的布局需求选择合适的方案，两种方案都能稳定实现html5音频的居中效果，兼容性也覆盖了主流的现代浏览器，不需要担心兼容性问题。
html5音频CSS_flextext-align_center音频居中修改时间：2026-06-18 01:30:44