将较宽的 div 居中在较窄的 div 中答案

【问题标题】：Center a wider div in a narrower one将较宽的 div 居中在较窄的 div 中
【发布时间】：2013-04-10 13:59:03
【问题描述】：

<div id="narrow">
   <div id="wide">
   </div>
</div>

我有一个 div，里面还有一个比父级更宽的 div。

#narrow div 具有可变宽度，#wide div 具有固定宽度。

我如何将#wide div 居中在#narrow div 中，以便在#narrow 被赋予overflow:hidden 时修剪#wide div 的左侧和右侧？

【问题讨论】：

How do I center the #wide div inside the #narrow div so that the left and right side of #wide div are trimmed? - Second, how to prevent a descendent from flowing out of the ancestor's box 我认为他实际上是希望孩子溢出父母之外。
@PointedEars 这里有一个问题：如何使#narrow 分隔器修剪#wide 分隔器的两侧。这真的不是一个基本的问题。 overflow:hidden 只会修剪一侧。
@Ejay 不，再读一遍。 “……这样#wide div的左右两边都被修剪了。”
@JamesDonnelly 是的，是的。一旦在祖先中水平居中，较宽的后代将总是被剪裁，如果被剪裁，两侧。
@PointedEars 是的，我读过 :) 在我看来，他仍然希望两个 <div> 元素的中心彼此对齐。 编辑：不管孩子是否比父母宽

标签： html css

【解决方案1】：

您可以使用position: absolute 使宽div 居中，然后使用负数margin-left 使其居中。请注意，这仅在元素具有固定宽度时才有效。

JS-Fiddle

#narrow {
    position: relative;
    width: 200px; //may be variable
}

#wide {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -150px; // half the width
    width: 300px; // must be fixed
}

要隐藏在狭窄 div 上流动的部分，您可以使用overflow: hidden。

【讨论】：

#narrow 分隔线具有流体宽度。
你是个天才！这完美！谢谢，谢谢，谢谢，我整天都在努力解决这个问题！
这是我已经遇到过几次的常见问题 :) @JamesDonnelly：我的示例适用于可变宽度。
我认为如果孩子的宽度恒定，它可以解决 OP 的问题。现在，为了自己弄清楚，当子宽度和父宽度可变时，这不起作用。 jsfiddle.net/Rwy5T/4 编辑：好的，注意到您的免责声明 :) 当两个宽度都可变时，您能否找到一种使其工作的方法。这将是有价值的解决方案:)
@Nirazul 变量：仅当您还使用负百分比边距时。剩下的问题是浅视口和水平滚动存在问题。也许 CSS Computed Values 会在某个时候提供解决方案。

【解决方案2】：

简单的css：

#narrow {overflow: hidden;}

【讨论】：

不，这不会居中，它会裁剪#wide div。