使用 justify-content: center 实现水平居中，需将父容器设为 display: flex，子元素在主轴上居中对齐，适用于单个或多个元素，配合 gap 可控制间距，且子元素不可脱离文档流，现代浏览器兼容性好。
在CSS中使用Flexbox实现水平居中，最常用的方法是通过 justify-content: center 来对齐主轴上的子元素。这种方式适用于容器内的多个或单个元素在水平方向上居中对齐。
1. 基本结构设置
要使用 Flexbox 实现水平居中，首先需要将父容器的 display 属性设为 flex，然后使用 justify-content: center 对子元素进行主轴（默认为水平轴）居中。
示例代码：
.container {
display: flex;
justify-content: center;
}
此时，所有子元素将在容器内水平居中排列。
立即学习“前端免费学习笔记（深入）”；
2. 理解 justify-content 的作用
justify-content 控制的是子元素在主轴方向上的对齐方式。当主轴为水平方向（默认情况）时，该属性决定元素如何在水平方向上分布。
- center：子元素在主轴居中对齐
- flex-start：靠左对齐（默认）
- flex-end：靠右对齐
- space-between：两端对齐，元素间间距相等
- space-around：元素周围有相等空间
对于水平居中，center 是最直接的选择。
3. 完整示例
以下是一个完整的HTML和CSS示例，展示如何使用 Flexbox 水平居中一个或多个按钮：
<div class="flex-container"> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </div>
.flex-container {
display: flex;
justify-content: center;
gap: 16px; /* 可选：控制子元素间距 */
}
结果是三个按钮在容器中水平居中，并保持相等间距。
4. 注意事项
确保父容器有足够的宽度来体现居中效果。如果父容器宽度等于子元素总宽度，居中可能看起来不明显。
- 子元素不能设置 float 或 position: absolute，否则会脱离 Flex 布局
- 若需垂直居中，可配合 align-items: center
- Flexbox 在现代浏览器中兼容性良好，推荐用于响应式布局
基本上就这些。使用 display: flex 和 justify-content: center 是目前最简洁可靠的水平居中方案之一。
