不能直接在中嵌入文字，因其为void元素；推荐用flex+伪元素或fieldset+legend实现居中“线+文”效果，兼顾可控性与兼容性。
<hr> 本身不支持直接嵌入文字，也没有内置居中文字的能力。想实现“水平线中间夹文字且整体居中”，本质是绕过 <hr> 的限制，用更可控的布局方式模拟效果。
为什么不能直接在 <hr> 里写文字
<hr> 是 void 元素（自闭合标签），浏览器不允许在其内部插入任何内容，包括文本。强行写 <hr>标题 会导致 HTML 结构错误，文字会脱离水平线、位置不可控，甚至被解析到 <hr> 外部成为独立段落。
用 <div> + CSS 实现真正居中的“线+文”组合
<p>推荐用一个 <code><div> 容器包裹文字，并用伪元素（<code>::before/::after）生成左右两条线，视觉上形成“文字居中、线向两侧延伸”的效果：
- 容器设为
display: flex，用 justify-content: center 居中文本
- 文字元素设
position: relative，再用 ::before 和 ::after 在其左右绝对定位画线
- 避免用
border 或 background 直接撑开容器高度，否则线会太粗或位置偏移
display: flex，用 justify-content: center 居中文本position: relative，再用 ::before 和 ::after 在其左右绝对定位画线border 或 background 直接撑开容器高度，否则线会太粗或位置偏移简例：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<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></fieldset> + <legend></legend> 快速兼容老浏览器
如果项目需支持 IE8–IE11 或不想写额外 CSS，<fieldset></fieldset> 的默认渲染天生就是“线包围文字+文字居中”。虽然语义上它本用于表单分组，但作为视觉 hack 广泛使用：
-
<legend></legend>默认居中，且上下自动带线（border） - 去掉多余边框：用 CSS 清掉
fieldset的border和padding，只留legend的线和文字 - 注意：部分旧版 Safari 对
legend的垂直对齐有偏差，需加line-height微调
简例：
真正要注意的是：别执着于“必须用 <hr>”，它只是语义化的分割线，不是视觉装饰工具。实际项目里，99% 的“中间带字水平线”都是用 flex + 伪元素或 fieldset 实现的——前者可控性强，后者零 JS、零额外标签、兼容性稳。选哪个，取决于你是否要照顾 IE 或是否已有 CSS 架构约束。
