居中需设width+margin:auto或flex，因它是块级元素，text-align对其无效；width为auto时margin:auto不生效，兼容IE8需加display:block；伪元素方案更灵活但牺牲语义。
水平线用 <hr> 时，text-align: center 为什么无效
因为 <hr> 是块级元素，默认独占一行，text-align 只对行内内容起作用，对块本身没影响。强行加 text-align: center 到父容器，只是让“看不见的换行符”居中，不是 <hr> 居中。
- 别给
<hr>父元素设text-align: center，这是常见误解 - 想居中，得控制
<hr>自身的盒模型：要么设宽度 +margin: auto，要么用 flex - 旧版 IE 对
margin: auto支持不稳定，如果还要兼容 IE8，得额外加width和display: block
margin: auto 居中 <hr> 的必要条件
必须显式设置 width（哪怕 width: 100%），否则 margin: auto 在块级元素上不触发居中行为——浏览器会把左右 margin 都算成 0。
-
<hr style="width: 60%; margin: 1rem auto;">✅ 有效 -
<hr style="margin: 1rem auto;">❌ 无效（宽度为 auto，居中失效） - 如果设
width: 100%，那margin: auto实际没效果，因为已占满容器 - 注意外边距单位：用
rem或em比px更易维护，但别混用
用 Flex 布局替代 margin: auto 的适用场景
当 <hr> 在一个需要统一布局逻辑的容器里（比如卡片、表单分隔），用 flex 更可控，也避免意外继承 text-align。
- 父容器加
display: flex+flex-direction: column，再给<hr>加align-self: center - 或者父容器设
display: flex+justify-content: center，但需确保<hr>不是唯一子元素，否则可能撑满 - Flex 下不用管
width，align-self会尊重原始宽度；但若想限制长度，仍要设width - 注意 Safari 旧版本对
align-self在<hr>上的支持有 bug，可降级为margin: auto保底
伪元素画线比 <hr> 更灵活的时机
当水平线需要和文字联动（如“或”字居中，线从左右延伸）、或要精确控制颜色/粗细/圆角时，<hr> 很难满足，该换思路。
立即学习“前端免费学习笔记（深入）”；
- 用
<div class="divider">或</div>+::before/::after画线，文字作为内容自然居中 - CSS 示例：
.divider { text-align: center; position: relative; }+.divider::before { content: ""; position: absolute; top: 50%; left: 0; width: 40%; height: 1px; background: #ccc; }+.divider::after同理向右 - 这样线长、间距、颜色、是否虚线都可独立控制，且无语义干扰
- 缺点是多一层 DOM，SEO 或无障碍若真需要语义化分隔，还是保留
<hr>更稳妥
margin: auto 就只是起点。 
