最稳写法是display: flex+align-items: center，文字用span包裹并设white-space: nowrap，左右伪元素::before/::after设flex: 1和border-top实现撑满分割线。
flex实现文字居中、分割线撑满的常见写法
直接用 display: flex + align-items: center 是最稳的路径，文字在中间，左右两段线自动占剩余空间。关键不是“画一条线”，而是把线当成 flex 里的两个兄弟元素来布局。
- 文字用
span包裹，设white-space: nowrap防止换行 - 左右各放一个空
div或伪元素，设flex: 1吃掉剩余空间 - 给这两个“线容器”加
border-top（或height+background），就能出线 - 整行设
height: 1px或line-height: 1em控制线粗细，避免意外留白
用伪元素更轻量：避免 DOM 节点污染
实际项目里多数人不需要额外 div，::before 和 ::after 完全够用，而且不增加语义负担。但要注意伪元素默认是 inline，必须显式设 content: "" + display: block 才能撑开。
- 父容器设
display: flex、align-items: center -
span文字设margin: 0 16px（留出线与字间距） -
::before和::after各设flex: 1、border-top: 1px solid #ccc - 如果文字高度不一致（比如混用
sup），加vertical-align: middle对齐
IE11 兼容性陷阱：flex: 1 不生效怎么办
IE11 对 flex: 1 解析有 bug，尤其当父容器没设明确 width 或内部有 min-width: auto 时，左右“线”会塌缩。这不是 flex 写错了，是渲染引擎缺陷。
- 替代方案：用
flex: 1 1 0%（即flex-grow: 1; flex-shrink: 1; flex-basis: 0%） - 或者干脆放弃
flex: 1，改用width: calc((100% - 80px) / 2)（80px 是文字+间距估算值） - 若用伪元素，IE11 不支持对
span::before设flex，必须把伪元素挂到块级父容器上 - 测试时打开 IE11 开发者工具，看 computed 样式里
flex-basis是否被重写为auto
响应式断裂点：文字变长后线被挤没
当文字内容动态变化（比如多语言切换、用户输入），固定 margin 或预估 calc 宽度会失效，线直接消失或重叠。这不是 flex 的问题，是布局假设被打破了。
立即学习“前端免费学习笔记（深入）”；
- 优先用
flex: 1方案，它天然适应内容宽度变化 - 给文字加
max-width: 70%（配合overflow: hidden; text-overflow: ellipsis）保底线 - 避免在移动端用
font-size: 2rem这类绝对单位，改用rem或clamp()防止文字撑爆容器 - 真遇到极端情况（如超长英文无空格），加
word-break: break-all，但要同步调高容器line-height防线偏移
文字居中那条线看着简单，真正卡住人的永远是「文字长度不确定 + 多端尺寸不一致 + 旧浏览器还得跑」这三件事叠加。别迷信单一样式能通吃，留一手 fallback 总比线上突然断线强。
