如何让固定宽度、高度可变的div水平居中并溢出父容器且不影响垂直布局？

现有如下HTML结构：

<body style="max-width: 50px; border: 1px solid black; margin: 0 auto;">
<p>This is some text</p>

<div style="width: 100px; background: yellow">
<p>Some wider content</p>
</div>

<p>Some more narrow text</p>
</body>

需求为让其中的黄色div水平居中并溢出body容器，且无需影响垂直布局、不用显式设置外层div高度，实现真正的居中效果而非固定偏移。

推荐两种不破坏垂直布局的实现方式：

方案1：CSS Grid（简洁高效） #

给body添加display: grid布局，再给黄色div设置justify-self: center即可：

<body style="max-width: 50px; border: 1px solid black; margin: 0 auto; display: grid; gap: 1em;">
<p>This is some text</p>

<div style="width: 100px; background: yellow; justify-self: center;">
<p>Some wider content</p>
</div>

<p>Some more narrow text</p>
</body>

• 原理：Grid的justify-self: center会让元素相对于整个视口宽度居中，哪怕元素宽度超过body的max-width，也能实现真正水平居中；同时其他元素保持正常垂直流布局，加gap: 1em是为了维持原布局的段落间距。

方案2：transform + 负margin（兼容旧浏览器） #

直接给黄色div设置margin-left: 50%; transform: translateX(-50%);，不需要额外容器：

<body style="max-width: 50px; border: 1px solid black; margin: 0 auto;">
<p>This is some text</p>

<div style="width: 100px; background: yellow; margin-left: 50%; transform: translateX(-50%);">
<p>Some wider content</p>
</div>

<p>Some more narrow text</p>
</body>

• 原理：margin-left: 50%让div左边缘对齐body中线，transform: translateX(-50%)把div向左偏移自身宽度的一半，完美实现居中，全程不影响其他元素的垂直布局。

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