hr在两栏布局中偏左或撑不满，因其默认块级行为不适应浮动/flex等脱离文档流的布局；应改用伪元素、Grid网格线或calc()绝对定位实现精准居中分隔。
两栏布局里 hr 为什么总偏左或撑不满？
直接在两栏之间放 <hr> 几乎必然失败——它默认是块级元素，宽度 100%，但会紧贴父容器左边缘，且不感知左右栏的留白或浮动。更糟的是，如果两栏用了 float 或 flex，hr 很可能被挤出流、错位，甚至完全不可见。
根本原因：浏览器对 hr 的默认渲染基于普通文档流，而两栏布局（尤其是浮动或 flex）已改变了流的结构。指望 hr 自动“知道”两栏中间在哪，等于让它猜谜。
-
hr不是布局工具，它是语义分隔符，不是视觉分隔线 - 用
width、align等旧属性强行调整，在现代 CSS 中无效或被忽略 - 若父容器有 padding 或 margin，
hr的 100% 宽度会包含这些区域，导致视觉错位
用 Flex 布局 + 伪元素画居中竖线最稳
两栏用 display: flex 时，把分割线做成右侧栏的 ::before 伪元素，靠 position: absolute 和 left: -1px 拉到两栏缝隙中，是最轻量、最可控的方式。
示例结构：
立即学习“前端免费学习笔记（深入）”；
div.container {
display: flex;
height: 200px;
}
.left { flex: 0 0 300px; background: #eee; }
.right { flex: 1; position: relative; background: #f9f9f9; }
.right::before {
content: '';
position: absolute;
top: 50%;
left: -1px;
transform: translateY(-50%);
width: 1px;
height: 60%;
background: #ccc;
}- 竖线高度设为
60%而非100%，避免顶到底部留白干扰 -
left: -1px是关键：刚好贴住右栏左边缘，视觉上就在两栏正中间 - 不用额外 HTML 元素，不破坏语义，响应式下随 flex 缩放自动适配
Grid 布局下用 grid-column 控制分割线位置
如果两栏用 display: grid 实现（比如 grid-template-columns: 300px 1fr），分割线可以作为独立网格项，用 grid-column 显式指定它横跨两列之间的缝隙。
示例：
div.container {
display: grid;
grid-template-columns: 300px 1fr;
height: 200px;
}
.left { background: #eee; }
.right { background: #f9f9f9; }
.divider {
grid-column: 2 / 3; /* 占据第2列右侧、第3列左侧之间的间隙 */
width: 1px;
background: #999;
align-self: center;
height: 60%;
}-
grid-column: 2 / 3表示从第 2 条网格线开始，到第 3 条结束——这正是两栏交界处 - 必须设
align-self: center，否则默认顶对齐 - 注意：如果列数动态变化（如媒体查询切换为单列），需同步修改
grid-column值，否则线会消失
绝对定位 + calc() 在浮动布局里硬算位置
老项目还在用 float？那就得手动计算。假设左栏固定宽 300px，右栏自适应，分割线宽度 1px，它的 left 值应为 calc(300px + 0.5px)（左栏右边缘 + 半像素）。
HTML 需加一个显式 <div class="divider"></div>，CSS 如下：
.container { position: relative; }
.left { float: left; width: 300px; }
.right { margin-left: 300px; }
.divider {
position: absolute;
top: 50%;
left: calc(300px + 0.5px);
transform: translateY(-50%);
width: 1px;
height: 60%;
background: #777;
}- 务必给
.container加position: relative，否则absolute会相对于视口定位 -
calc()里的0.5px是为了视觉居中，避免 1px 线因像素对齐偏左或偏右 - 此方案脆弱：左栏宽度一变，
calc()就得同步改，不适合响应式断点频繁切换的场景
真正难的不是画一条线，而是让这条线始终“知道”自己该站在哪——它依赖你对布局模型的理解，而不是对 hr 标签的幻想。
