居中需设明确宽度并用margin: 0 auto，因其默认width: 100%阻碍居中；text-align: center对其无效，因它只作用于行内内容；Flex方案更现代简洁。
<hr> 默认是块级元素，天然独占一行，但不会自动水平居中——它默认宽度是 100%，所以看起来“铺满”，实则是撑开父容器，不是居中。
为什么 text-align: center 对 <hr> 无效
text-align 只作用于行内内容（文字、图片等）在块级容器内的**行内对齐方式**，而 <hr> 是块级元素，不受其影响。给父容器加 text-align: center，对 <hr> 完全没用。
- 即使你把
<hr>改成display: inline-block，再配text-align: center，也得额外设宽度，否则它仍会按内容宽渲染（通常极窄） - 更关键的是：这种改法破坏了语义——
<hr>本意就是分隔段落，应保持块级流式行为
最稳妥的居中方案：margin: 0 auto + 明确宽度
这是兼容性最好、语义最清晰的做法。只需两步：
- 给
<hr>设置一个具体宽度，比如width: 60%或width: 200px - 同时设置
margin: 0 auto（注意不是margin: auto，后者在旧版 IE 中可能不一致）
示例：
立即学习“前端免费学习笔记（深入）”；
<hr style="width: 60%; margin: 0 auto; border: none; height: 1px; background: #ccc;">
⚠️ 注意：border: none 和 height+background 是为了更可控地绘制线；若保留默认 border，需确保 border-width 不为 0，否则线可能不可见。
Flexbox 方案（现代项目首选）
如果你的父容器本身已用 Flex 布局，或想统一用现代方案管理居中逻辑，直接让父容器控制 <hr> 的位置更干净：
- 父容器设
display: flex+justify-content: center -
<hr>无需设宽度，也不用改display类型，保持原生块级即可 - 如需垂直微调（比如上下留空），可加
align-self: center或用margin单独控制
示例：
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; justify-content: center;"> <hr style="width: 80%; border: none; height: 2px; background: #333;"> </div>
容易被忽略的关键点
<hr> 居中不是“加个样式就完事”，核心在于理解它仍是普通块级元素——所有块级居中规则都适用，但它的默认 width: 100% 是最大干扰项。删掉这个默认值（显式覆盖为更小宽度），才能触发 margin: 0 auto 的居中计算。另外，不要试图用 transform: translateX(-50%) 配合 position: relative，那属于过度设计，且易引发文档流错位或响应式断裂。
