Flex容器内项目水平居中只需在父容器设置justify-content: center并启用display: flex；主轴为水平时生效，需避免子元素脱离弹性上下文，且仅对直接子元素有效。
Flex 实现容器内项目水平居中，核心只需一行关键 CSS：在父容器上设置 justify-content: center，同时确保容器已启用 Flex 布局。
基础写法（默认主轴为水平）
当父容器使用 display: flex 且未修改 flex-direction（即保持默认的 row）时，主轴就是水平方向。此时：
- justify-content: center 直接控制项目在水平方向的居中
- 无需设置子元素宽度、margin 或 text-align
- 对单个或多个子项目都有效
必须满足的前提条件
即使写了 justify-content: center，若以下任一缺失，水平居中可能“看起来没反应”：
- 父容器必须声明 display: flex（或
inline-flex） - 避免子元素使用
float、position: absolute或display: inline-block等脱离弹性上下文的属性 - 若父容器是
<body>，记得同步重置html, body { margin: 0; }，防止默认外边距干扰视觉效果
常见误用与替代情况
如果水平居中不生效，先检查是否陷入这些典型误区：
- 只写了
align-items: center→ 它管垂直方向，对水平无效 - 误设
flex-direction: column→ 此时主轴变成垂直，justify-content就改管上下了；如需仍用它控水平，请配合align-items: center - 子元素被包裹在中间层 div 里 → Flex 对齐只作用于直接子元素，嵌套后需逐层设
display: flex
简洁可靠示例
以下代码可直接复用，实现任意数量子项的水平居中：
<!-- HTML -->
<div class="container"><br> <div>项目一</div><br> <div>项目二</div><br> </div>
<!-- CSS -->
.container {<br>
display: flex;<br>
justify-content: center;<br>
} 
