使用 justify-content: center 实现 Flexbox 水平居中，需设置父容器 display: flex；若仅居中特定子元素，则应用 margin: 0 auto；默认主轴为水平方向，确保 flex-direction: row 以正确对齐。
在 CSS Flexbox 中实现水平居中非常简单，只需要在父容器上设置几个关键属性即可。以下是具体方法。
使用 justify-content 实现子元素水平居中
Flexbox 的 justify-content 属性用于控制主轴（默认是横轴）上的对齐方式。要实现水平居中，将该属性设置为 center。
示例代码：
.container {
display: flex;
justify-content: center; /* 水平居中 */
}
.item {
/* 子元素无需特殊设置 */
}这样，所有子元素会在容器内水平居中排列。
立即学习“前端免费学习笔记（深入）”；
仅居中某个特定子元素
如果父容器是 Flex 容器，但只想让其中一个子元素居中，可以给该子元素设置 margin: auto。
.container {
display: flex;
}
.center-item {
margin: 0 auto; /* 左右外边距自动分配，实现居中 */
}这种方法适合在多个子元素中单独控制某一个的对齐方式。
确保主轴方向正确
Flexbox 默认主轴是水平方向（flex-direction: row），所以 justify-content 控制的是水平对齐。如果你修改了主轴方向为 vertical，记得调整对应的属性。
保持默认即可用于水平居中：
.container {
display: flex;
flex-direction: row; /* 默认值，可省略 */
justify-content: center;
}基本上就这些。使用 display: flex 和 justify-content: center 是最常用也最可靠的水平居中方式。不复杂但容易忽略细节。基本上就这些。
