在寬度可以大於父母的父級中居中動態寬度的div

Question

好的我希望我能清楚我需要什麼。

我有5個Div的：一個包裝，DIV 1，2區，3 DIV和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居中，即使它變大了div 2.

如何做到這一點。此時div4總是在div2中。玩過浮動，定位和邊距，但由於div 4的寬度是動態的，所以我永遠無法使它居中。

可以說，我已經在DIV 4中輸入文字，然後我要讓它看起來像這樣：

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

我希望這部鉅著清楚。 Div4可以更大或更小，具體取決於文本。

如果更容易把div2和div4放在一個新的包裝中，這對我來說很好，但是div 1和div 2應該總是與div 2「連接」（也試過這個，但是這導致了div 1和格3至距DIV2）

我也曾嘗試：

1. 搜索這個網站:)
2. 谷歌搜索
3. 保證金：0〜50％;
4. position：relative;
5. display：inline-block;
6. display：tabel; （和細胞）
7. 等

希望有人可以提供幫助。

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) 
} 

看到這個小提琴：http://jsfiddle.net/5dh66t14/

Answer 2

你可以使用這個CSS：

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

Working Fiddle