不能直接在<hr>中嵌入文字，因其为void元素；推荐用flex+伪元素或fieldset+legend实现居中“线+文”效果，兼顾可控性与兼容性。
<hr> 本身不支持直接嵌入文字，也没有内置居中文字的能力。想实现“水平线中间夹文字且整体居中”，本质是绕过 <hr> 的限制，用更可控的布局方式模拟效果。
为什么不能直接在 <hr> 里写文字
<hr> 是 void 元素（自闭合标签），浏览器不允许在其内部插入任何内容，包括文本。强行写 <hr>标题</hr> 会导致 HTML 结构错误，文字会脱离水平线、位置不可控，甚至被解析到 <hr> 外部成为独立段落。
用 <div> + CSS 实现真正居中的“线+文”组合
推荐用一个 <div> 容器包裹文字，并用伪元素（::before/::after）生成左右两条线，视觉上形成“文字居中、线向两侧延伸”的效果：
- 容器设为
display: flex，用justify-content: center居中文本 - 文字元素设
position: relative，再用::before和::after在其左右绝对定位画线 - 避免用
border或background直接撑开容器高度，否则线会太粗或位置偏移
简例：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<div class="hr-with-text">分隔标题</div>
<style>
.hr-with-text {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #666;
font-size: 14px;
}
.hr-with-text::before,
.hr-with-text::after {
content: "";
flex: 1;
border-top: 1px solid #ddd;
margin: 0 12px;
}
</style>
用 <fieldset> + <legend> 快速兼容老浏览器
如果项目需支持 IE8–IE11 或不想写额外 CSS，<fieldset> 的默认渲染天生就是“线包围文字+文字居中”。虽然语义上它本用于表单分组，但作为视觉 hack 广泛使用：
-
<legend>默认居中，且上下自动带线（border） - 去掉多余边框：用 CSS 清掉
fieldset的border和padding，只留legend的线和文字 - 注意：部分旧版 Safari 对
legend的垂直对齐有偏差，需加line-height微调
简例：
立即学习“前端免费学习笔记（深入）”；
<fieldset class="hr-legend">
<legend>分隔标题</legend>
</fieldset>
<style>
.hr-legend {
border: none;
padding: 0;
}
.hr-legend legend {
width: auto;
margin: 0 auto;
padding: 0 12px;
border: none;
font-size: 14px;
color: #666;
}
</style>
真正要注意的是：别执着于“必须用 <hr>”，它只是语义化的分割线，不是视觉装饰工具。实际项目里，99% 的“中间带字水平线”都是用 flex + 伪元素或 fieldset 实现的——前者可控性强，后者零 JS、零额外标签、兼容性稳。选哪个，取决于你是否要照顾 IE 或是否已有 CSS 架构约束。
