最简洁可靠的方式是给中间元素设置 margin: auto，因其在 Flex 容器中可同时在主轴和交叉轴吸收剩余空间，使中间项两侧空白均分而居中，左右项则紧贴容器边缘保持固定。

要让 Flex 布局中中间元素居中、两边元素固定（比如左右各一个图标或按钮），最简洁可靠的方式就是给中间元素设置 margin: auto。

为什么 margin: auto 在 Flex 里能居中？

在 Flex 容器中，margin: auto 不仅会吸收剩余空间，还能在主轴（row）和交叉轴（column）上同时生效。当只给中间项设 margin: auto，它两侧的空白会被自动均分，从而实现视觉上的水平居中，而左右两项则紧贴容器边缘，保持“固定”位置。

基础 HTML 结构示例

假设结构如下：

  ←
  

标题

  →

CSS 关键写法

只需三步：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

• 父容器设为 display: flex
• 左右元素不设 flex 相关属性（或设 flex: none），保持固有尺寸
• 中间元素加 margin: auto（等价于 margin: 0 auto）

.flex-container {
  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 到中间项，防止被压缩

基本上就这些 —— 不复杂但容易忽略细节。