在宽度可以大于父级的父级中以动态宽度居中 div

Question

好的，希望我能说清楚我需要什么

我有 5 个 Divs：包装器，div 1，div 2，div 3 和 div 4。

HTML:

<div id="main">
    <div id="one">1</div>
    <div id="two">2
        <div id="four">4</div>
    </div>
    <div id="three">3</div>
</div>

CSS:

#main{
    height:200px;
    border: 1px solid red;
    float:left;
}

#one{
    min-width:100px;
    max-width:200px;
    background-color:#cccccc;
    height:100%;
    float:left;

}

#two{
    width:50px;
    height: 50px;
    background-color:#ccffff;
    float:left;
 }

#three{
    min-width:100px;
    max-width:200px;
    background-color:orange;
    height:100%;
    float:left;
}
#four{
    min-width:52px;
    max-width:200px;
    background-color:pink;

}

Please see this fiddle

Div 4 包含在其父 div 2 中。Div 4 始终需要以 div 2 为中心，即使它比 [=61 大=] 2.

如何做到这一点。此时 div4 总是在 div2 中。玩过浮动、定位和边距，但由于 div 4 宽度是动态的，我永远无法使其居中。

假设我在 div 4 中输入了文本，然后我想让它看起来像这样：

 _______________
 | 1  |2  | 3   |
 |  __|___|___  |
 |  |div4 txt|  |
 |  |________|  |
 |____|___|_____|

希望这部杰作能说清楚。 Div4 可大可小，具体取决于其中的文字。

如果将 div2 和 div4 放在一个新的包装器中更容易，我觉得没问题，但是 div 1 和 div 2 应该总是是 "connected" 到 div 2（也试过这个，但这导致 div 1 和 div 3 与 div2 分开）

我也试过：

正在搜索此站点:)
正在搜索google
保证金：0 -50%；
位置：相对；
显示：内联块；
显示：表格；（和细胞）
等等

希望有人能提供帮助。

ps 也 div 1 和 3 并不总是显示。！可以隐藏，3个可以隐藏但是两个都可以隐藏

Answer 1

我认为你必须使用绝对定位。

#four{
    min-width:52px;
    max-width:200px;
    width: 200px;
    background-color:pink;
    position: absolute;
    top: 50%;
    left: calc(50% - 100px)
}

看到这个fiddle：http://jsfiddle.net/5dh66t14/

Answer 2

你可以使用这个CSS:

#four {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}

Working Fiddle

在宽度可以大于父级的父级中以动态宽度居中 div

Center a div with dynamic width in a parent where the width can be bigger than the parent

html

css

margin

css-position

css-float