必须用容器包裹和，通过relative+absolute定位使链接覆盖居中于水平线中央，或用flex布局配合flex:1和justify-content:center实现；自身不能嵌套内容。
超链接放在 <hr> 正中间，不是“对齐”，而是“覆盖”
直接把 <a></a> 放在 <hr> 标签里是无效的——<hr> 是空元素，不能包含子节点。所谓“居中”，其实是让链接视觉上压在水平线中央位置。这本质是层叠（position: relative/absolute）+ 定位偏移的问题，不是文本对齐。
用绝对定位把 <a></a> 挂在 <hr> 上方正中
最可靠、兼容性好、不依赖 Flex/Grid 的做法：给 <hr> 父容器设 position: relative，再把链接设为 position: absolute，用 top: 50% + transform: translateY(-50%) 垂直居中，再用 left: 50% + transform: translate(-50%, -50%) 水平垂直双居中。
关键点：
-
<hr>必须有明确的父容器（比如<div>），不能直接丢在 <code>里裸奔 - 链接需设
display: block（否则width和transform行为不可控） - 若链接文字过长，建议加
white-space: nowrap防止折行破坏居中
<div style="position: relative; text-align: center;"> <hr style="margin: 0;"> <a href="#" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; background: #fff; padding: 0 12px;">点击这里</a> </div>
text-align: center 只能水平居中，对 <hr> 本身没用
<hr> 默认是块级元素，text-align: center 对它自身无效；但它会影响其**兄弟行内元素**（比如紧挨着它的 <a></a>）。所以如果把链接和 <hr> 并列放在同一父容器里，只设 text-align: center，链接会水平居中，但垂直方向仍在基线位置，离 <hr> 有一段距离（默认上下 margin），看起来并不“在线中间”。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 链接文字底部贴着
<hr>上边缘（没留白，像被压扁） - 链接整体浮在
<hr>上方，像悬浮按钮 - 换行后链接变宽，
text-align失效，左右错位
Flex 布局更简洁，但要注意父容器高度
如果父容器高度可控（比如设了 min-height: 40px），用 Flex 是最干净的写法：
<div style="display: flex; align-items: center; justify-content: center; height: 40px;"> <hr style="flex: 1; margin: 0;"> <a href="#" style="margin: 0 12px; white-space: nowrap;">点击这里</a> </div>
注意：<hr> 要设 flex: 1 占满剩余空间，链接靠 justify-content: center 居中；但若父容器高度没设，Flex 主轴可能塌陷，导致链接“掉下来”。
容易被忽略的点：当 <hr> 和 <a></a> 是 Flex 子项时，<hr> 的默认 margin 会被 Flex 忽略，必须显式设 margin: 0，否则会出现意外间距。
