无需 javascript，仅用 css 即可实现：将窄小（甚至 1px 宽高）的绝对定位父容器设为 flex 容器，并让子元素保持 absolute 定位，借助 `justify-content: center` 实现视觉上的水平居中。
在 CSS 布局中，当父容器宽度极小（如 width: 1px）、且子元素内容较宽（如长文本或设置了 max-width: 200px）时，常规的 margin: 0 auto 或 text-align: center 均会失效——因为子元素无法在父容器内“自然流式展开”。此时，一个简洁可靠的解决方案是组合使用 Flexbox 与绝对定位：
- 将父容器 .p 设置为 display: flex，并启用 justify-content: center（水平居中）和 align-items: center（垂直居中，按需保留）；
- 关键点：父容器仍保持 position: absolute（满足定位需求），而子元素 .c 显式声明 position: absolute —— 这使其脱离文档流，但其定位参考系仍为父容器；
- Flex 的 justify-content: center 作用于 flex 主轴，它会计算子元素的几何中心点，并将其对齐到父容器主轴中心 —— 即使子元素宽度远超父容器，该居中逻辑依然生效。
✅ 示例代码（可直接运行）：
.p {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 100px;
left: 200px;
width: 1px;
height: 1px;
outline: 2px solid red; /* 可视化父容器位置 */
}
.c {
position: absolute; /* 必须显式设置，否则 flex 会尝试布局它 */
outline: 1px dashed #666;
max-width: 200px; /* 满足“至少有宽度约束”的需求 */
white-space: normal; /* 允许换行，非必须 nowrap */
}<div class="p"> <div class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> </div>
⚠️ 注意事项：
- 父容器必须同时具备 display: flex 和 position: absolute，二者不冲突，Flex 属性在绝对定位元素上完全有效；
- 子元素必须设 position: absolute，否则会被当作 flex item 参与弹性布局（导致宽度被压缩或溢出异常）；
- 此方案兼容所有现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），无需前缀；
- 若需响应式适配，可结合 transform: translateX(-50%) 进行微调（但本方案中非必需）。
总结：该技巧巧妙利用了 Flexbox 的中心对齐能力与绝对定位的渲染独立性，规避了“未知子宽”带来的计算难题，是纯 CSS 实现动态居中的优雅实践。
立即学习“前端免费学习笔记（深入）”；
