最稳妥做法是用带上下边框的div容器包裹文字并居中；若必须用hr，则通过伪元素+绝对定位注入文字，但需注意html合法性与浏览器兼容性。
用 <hr> 和定位实现文字居中覆盖
HTML 原生不支持直接在 <hr> 上显示文字——<hr> 是个空元素，没有子内容空间。想让文字“出现在两条水平线之间”，本质是视觉叠加，不是语义嵌套。
最稳妥的做法是放弃把文字塞进 <hr>，改用容器 + 边框模拟：
- 用一个
<div> 包裹文字，设上下边框（<code>border-top和border-bottom）来充当“两条线” - 文字本身用
margin或padding居中，避免依赖绝对定位带来的响应式问题 - 别用
<hr>套<span></span>，浏览器会忽略子内容，或触发怪异渲染（比如 Chrome 下文字被截断）
<div style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 0.5em 0; text-align: center;"> 中间文字 </div>
用伪元素给 <hr> 添加文字（需 CSS 支持）
如果必须保留 <hr> 标签结构（比如 CMS 输出受限），可用 ::before 或 ::after 伪元素把文字“贴”上去。
关键点在于：文字不能是 <hr> 的子节点，得靠 CSS 注入；否则 HTML 无效，且多数浏览器不渲染。
立即学习“前端免费学习笔记（深入）”；
- 给
<hr>加position: relative，为伪元素提供定位上下文 - 伪元素设
content: "文字"、position: absolute、top: 50%、transform: translateY(-50%)实现垂直居中 - 注意兼容性：
<hr>默认是块级元素，但某些老版 IE 对伪元素支持弱，慎用于需要兼容 IE11 及以下的场景
<hr style="position: relative; margin: 1em 0;">
<style>
hr::after {
content: "or";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 0 0.5em;
color: #666;
}
</style>
为什么不用 <hr>
<span>文字</span>？
这种写法在 HTML 中非法：<hr> 是 void element（空元素），不允许有结束标签，更不能包含子元素。浏览器解析时会自动闭合 <hr>，导致后续 <span></span> 被挤到外面，实际 DOM 结构变成：
<hr> <span>文字</span>
结果就是文字在水平线下方，而不是“中间”。开发者工具里一眼就能看出结构错乱。
- 验证方式：把代码粘到 W3C HTML Validator，会报
Error: Element hr is missing required attribute “size”.（旧标准）或直接标红语法错误 - 即使看起来“显示正常”，也是浏览器容错渲染的结果，不可靠，尤其在 strict mode 下容易崩
文字和线条颜色/粗细不匹配怎么办？
常见问题是文字背景没遮住线条，导致文字边缘发虚，或线条太细被文字盖住。
- 确保伪元素或容器的
background-color和父容器背景一致（比如白色背景就设background: #fff） - 线条用
border比用hr { height: 1px }更可控；后者依赖 line-height，容易因字体大小变化偏移 - 如果文字要响应式缩放，别用固定
px值设padding或font-size，改用em或rem
真正难的不是加文字，而是让文字在各种字号、缩放、暗色模式下都稳稳卡在线条正中——这时候就得放弃“一行 CSS 解决”的幻想，老实用容器+边框，可控性高得多。
