html - 将较宽的 div 居中在较窄的 div 中

Question

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

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

#narrowdiv 的宽度是可变的，div#wide的宽度是固定的。

如何在 div 中居中#widediv#narrow以便在#narrow给定时修剪 #wide div 的左侧和右侧overflow:hidden？

Answer 1

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

JS-小提琴

#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.

Answer 2

使用 css 很容易：

#narrow {overflow: hidden;}