本文介绍一种纯 CSS 的可靠方案：通过嵌套 position: relative 包裹层 + position: absolute 左置元素，实现「右侧元素动态居中、左侧元素始终紧邻其左」的响应式布局，无需 JS，不依赖固定尺寸。
本文介绍一种纯 css 的可靠方案：通过嵌套 `position: relative` 包裹层 + `position: absolute` 左置元素，实现「右侧元素动态居中、左侧元素始终紧邻其左」的响应式布局，无需 js，不依赖固定尺寸。
在 Flex 布局中，若希望 .el2 始终严格居中于容器，而 .el1 始终紧贴其左侧（无论 .el2 内容长短、宽高如何变化），直接使用 justify-content: center 无法满足需求——因为该属性会整体居中所有子项，导致两元素共同居中，失去相对位置关系。
正确解法是「语义分层 + 定位解耦」：
- 将 .el1 和 .el2 共同包裹在一个 .wrapper 中；
- 对 .container 保留 display: flex; justify-content: center; align-items: center;，使其仅负责居中 .wrapper；
- 给 .wrapper 设置 position: relative，作为绝对定位的参考上下文；
- 将 .el1 设为 position: absolute; right: 100%;，并确保其宽度适配（如 width: fit-content 或显式设为 max-content），从而自动紧贴 .wrapper 左边缘（即 .el2 左侧）；
- .el2 保持静态定位，自然居中于 .wrapper 内部（因 .wrapper 无额外 padding/margin，视觉上即居中于整个容器）。
✅ 推荐优化后的代码（移除冗余 width: 100%，改用更健壮的 fit-content）：
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: gray;
color: white;
min-height: 60px; /* 可选：保证可视高度 */
}
.wrapper {
position: relative;
}
.el1 {
background-color: red;
position: absolute;
right: 100%; /* 紧贴 .wrapper 左边界 */
white-space: nowrap;
padding: 4px 8px;
}
.el2 {
background-color: blue;
padding: 4px 12px;
}
<div class="container">
<div class="wrapper">
<span class="el1">element 1</span>
<span class="el2">element 2</span>
</div>
</div>
⚠️ 关键注意事项：
- 不要给 .el1 设置 width: 100%（原答案中的注释易引发误解）：它会使 .el1 拉伸至与 .wrapper 同宽，破坏“紧邻”效果；应依赖内容宽度（默认 width: auto）或显式使用 width: fit-content；
- 若 .el1 文字过长需换行，可添加 max-width: 200px; word-break: break-word; 并调整 right 值为 calc(100% + 8px) 预留间距；
- 此方案兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 79），无需 Flex 子项顺序调整或 order 属性；
- 如需支持 IE，可改用 display: inline-block + text-align: center 容器 + vertical-align: middle 替代，但灵活性与语义性略低。
该方法本质是将「居中逻辑」与「相对定位逻辑」分离：Flex 负责宏观居中（.wrapper），CSS 定位负责微观对齐（.el1 相对于 .el2）。结构清晰、可维护性强，是解决此类“主次元素动态对齐”问题的标准实践。
