CSS实现未知宽度宽子元素在绝对定位窄父元素中水平居中

可以实现，以下两种纯CSS方案完全符合你的要求：未知子元素宽度、无需white-space:nowrap、子元素带宽度限制（如max-width:200px）。

方案一：transform 平移法 #

利用相对定位和transform的百分比平移特性，无需提前知道子元素宽度：

.p {
  position: absolute;
  width: 1px;
  height: 1px;
  left: 200px;
  background: red;
}

.c {
  max-width: 200px; /* 必须设置的宽度限制 */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: #eee; /* 可选：方便查看效果 */
}

<div class="p">
  <div class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

原理：left:50%让子元素左边缘对齐父元素中心点，transform:translateX(-50%)再将子元素向左移动自身宽度的50%，最终实现子元素整体相对于父元素水平居中。内容超过max-width时会自动换行，不影响居中效果。

方案二：Flex布局法 #

给绝对定位的父元素添加Flex属性，利用Flex的居中特性更简洁实现：

.p {
  position: absolute;
  width: 1px;
  height: 1px;
  left: 200px;
  background: red;
  display: flex;
  justify-content: center;
}

.c {
  max-width: 200px; /* 必须设置的宽度限制 */
  background: #eee; /* 可选：方便查看效果 */
}

<div class="p">
  <div class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

原理：justify-content:center会让子元素在父元素的空间内保持居中，即便子元素宽度超过父元素，子元素的中心点仍会与父元素中心点对齐，满足需求且代码更简洁。

内容的提问来源于stack exchange，提问作者Toniq