使用 justify-content: center 实现水平居中，需将父容器设为 display: flex，子元素在主轴上居中对齐，适用于单个或多个元素，配合 gap 可控制间距，且子元素不可脱离文档流，现代浏览器兼容性好。
在CSS中使用Flexbox实现水平居中，最常用的方法是通过
justify-content: center
来对齐主轴上的子元素。这种方式适用于容器内的多个或单个元素在水平方向上居中对齐。
1. 基本结构设置
要使用 Flexbox 实现水平居中，首先需要将父容器的
display
属性设为
flex
，然后使用
justify-content: center
对子元素进行主轴（默认为水平轴）居中。
示例代码：
此时，所有子元素将在容器内水平居中
排列
。
立即学习
“
前端免费学习笔记（深入）
”；
2. 理解 justify-content 的作用
justify-content
控制的是子元素在主轴方向上的对齐方式。当主轴为水平方向（默认情况）时，该属性决定元素如何在水平方向上分布。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
center
：子元素在主轴居中对齐
flex-start
：靠左对齐（默认）
flex-end
：靠右对齐
space-between
：两端对齐，元素间间距相等
space-around
：元素周围有相等空间
对于水平居中，
center
是最直接的选择。
3. 完整示例
以下是一个完整的HTML和CSS示例，展示如何使用 Flexbox 水平居中一个或多个按钮：
结果是三个按钮在容器中水平居中，并保持相等间距。
4. 注意事项
确保父容器有足够的宽度来体现居中效果。如果父容器宽度等于子元素总宽度，居中可能看起来不明显。
子元素不能设置
float
或
position: absolute
，否则会脱离 Flex 布局
若需
垂直居中
，可配合
align-items: center
Flexbox 在现代
浏览器
中兼容性良好，推荐用于
响应式布局
基本上就这些。使用
display: flex
和
justify-content: center
是目前最简洁可靠的水平居中方案之一。
.container {
display: flex;
justify-content: center;
}
.flex-container {
display: flex;
justify-content: center;
gap: 16px; /* 可选：控制子元素间距 */
}