最直接的方法是父容器设text-align:center，靠右列额外包层并设text-align:right；现代推荐Flex布局，父容器display:flex+justify-content:center，靠右列加margin-left:auto。
用 text-align 控制单行内联元素对齐最直接
如果两列是同一父容器里的 span、a 或其他内联级元素（比如导航菜单项），不需要 Flex 或 Grid 这类重型方案。text-align 就够用，但必须确保父容器是块级且宽度可控。
常见错误是给子元素自己加 text-align —— 它只对子元素内部生效，不影响自身在父容器中的位置。
- 父容器设
text-align: center，所有内联子元素水平居中 - 其中靠右的那列额外加
margin-left: auto（仅当它是最后一个内联块时才有效）或改用display: inline-block+float: right - 更稳妥的做法：把靠右列单独包一层
div，设text-align: right，再和居中列并列放在父容器里
Flex 布局下用 justify-content 和 margin-left: auto
这是现代页面中最常用也最可靠的解法，尤其适合响应式场景。关键不是“左中右”三个位置都手动摆，而是让中间列「吸住」，右边列「推到边缘」。
错误做法是给三列分别设 flex: 0 0 auto 再硬调顺序 —— 容易错乱，且不响应内容变化。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex和justify-content: center - 居中列保持默认（无特殊样式）
- 靠右列加
margin-left: auto—— Flex 会把它挤到最后，不受中间列宽度影响 - 注意：如果父容器宽度不足，靠右列可能换行，此时需加
flex-wrap: nowrap
Grid 布局中用 grid-template-columns 显式定义轨道
当你需要精确控制列宽比例、留白或固定间隙时，Grid 比 Flex 更直观。但别一上来就写 fr 单位 —— 居中列不是“占满剩余空间”，而是“在中间轨道上居中显示”。
容易踩的坑是误以为 justify-items: center 能让某列居中 —— 它只影响单元格内内容，不是列本身的位置。
- 父容器设
display: grid和grid-template-columns: 1fr auto 1fr（中间列用auto或固定宽，两侧用1fr均分剩余空间） - 居中列放在中间轨道（比如
grid-column: 2） - 靠右列放在第三轨道（
grid-column: 3），或直接用justify-self: end放在最后一列右侧 - 若右侧列内容长度不固定，建议用
minmax(0, max-content)防止溢出
兼容性差的写法：绝对定位 + transform 或 calc()
老项目里常看到用 position: absolute 把一列设 left: 50% 再 transform: translateX(-50%) 居中，另一列用 right: 0 靠右。逻辑看似清晰，实际问题很多。
它会让元素脱离文档流，导致父容器高度塌陷、响应式断点失效、与其他浮动元素冲突。
- 除非父容器高度已知且固定，否则避免用
top/left配合transform -
calc(50% - width/2)要求你知道靠右列的精确宽度，而字体缩放、多语言、动态内容都会让它不可靠 - IE11 对
transform的translateX支持不稳定，容易偏移几个像素
事情说清了就结束。真正难的不是写出居中+靠右的效果，而是判断该用哪一层抽象：内联对齐、Flex 流、Grid 轨道，还是干脆重构 DOM 结构。选错层级，后面全是补丁。
