考虑这个 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>我想将黄色框居中，使其溢出
bodydiv有没有办法让div水平居中而不影响垂直布局的工作方式？
另请注意，我确实想将其居中；不仅仅是抵消固定金额。
在该 div 上使用以下设置：
position: relative;
left: 50%;
transform: translateX(-50%);
这会将 div 向右移动父级宽度的 50%，然后向左移动其自身宽度的 50%，从而使其水平居中。
position: relative;请注意，使用
position: relative;position: absolutebody {
max-width: 50px;
border: 1px solid black;
margin: 0 auto;
}
div {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100px;
background: yellow;
}<body>
<p>This is some text</p>
<div>
<p>Some wider content</p>
</div>
<p>Some more narrow text</p>
</body>你可以使用弹性盒。请注意，这将改变边距与子项交互的方式。
body {
display: flex;
flex-direction: column;
align-items: center;
}<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>