最简洁可靠的方式是给中间元素设置 margin: auto，因其在 Flex 容器中可同时在主轴和交叉轴吸收剩余空间，使中间项两侧空白均分而居中，左右项则紧贴容器边缘保持固定。
要让 Flex 布局中中间元素居中、两边元素固定（比如左右各一个图标或按钮），最简洁可靠的方式就是给中间元素设置 margin: auto。
为什么 margin: auto 在 Flex 里能居中？
在 Flex 容器中，margin: auto 不仅会吸收剩余空间，还能在主轴（row）和交叉轴（column）上同时生效。当只给中间项设 margin: auto，它两侧的空白会被自动均分，从而实现视觉上的水平居中，而左右两项则紧贴容器边缘，保持“固定”位置。
基础 HTML 结构示例
假设结构如下：
标题
CSS 关键写法
只需三步：
立即学习“前端免费学习笔记（深入）”；
- 父容器设为 display: flex
- 左右元素不设 flex 相关属性（或设 flex: none），保持固有尺寸
- 中间元素加 margin: auto（等价于 margin: 0 auto）
display: flex;
}
.left, .right {
flex: none; /* 可选，强调不伸缩 */
}
.title {
margin: auto;
}
注意事项和常见问题
如果中间元素没居中，检查以下几点：
- 父容器必须是 display: flex，且没有设置 justify-content 覆盖（如设了
justify-content: flex-start就会失效） - 中间元素不能同时设 flex: 1 或 flex-grow: 1，否则会抢占空间，抵消
margin: auto效果 - 若需兼容老版本 Safari，可加 flex-shrink: 0 到中间项，防止被压缩
基本上就这些 —— 不复杂但容易忽略细节。
