如何在絕對定位的以窗口爲中心的容器內獲得完美居中的元素（由兩個獨立元素包圍）？

Question

我有一個標記應該是這樣的即：

<div id="container"> 
    <div id="left"> 
    It is the primary text. 
    </div> 
    <div id="center"> 
    Hi! 
    </div> 
    <div id="right"> 
    some content 
    </div>  
</div> 

塊級#container元件應整個瀏覽器窗口的絕對定位並完全居中由寬度（不是由高度！）：

#container { 
    display: block; 
    width: 95vw; 
    background-color: white; 
    position: absolute; 
    top: 75px; 
} 

的塊級#center元件將沒有預定義的寬度或高度，它的尺寸是不可預測的，並在需要的時候（但也許它會具有預定義max-height/max-width值）它應儘可能多的空間。 編輯 /澄清：它應該採取最小所需的寬度/高度，這意味着它將需要20像素的填充，以及一些少量的像素爲「嗨！」，沒有更多，所以在這種情況下，它相對於容器來說會很小。

#center { 
    display: block; 
    background-color: green; 
    padding-left: 10px; 
    padding-right: 10px; 
} 

塊級元素#left應該採取的#container的的所有可能的剩餘空間，也將有text-overflow: ellipsis屬性：

#left { 
    display: block; 
    background-color: red; 
    padding-left: 10px; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
} 

的#right元素應該採取所有可能的剩餘#container的空間。它沒有特殊的屬性，但它只是一個獨立的塊級元素，可以包含任何東西。

#right { 
    display: block; 
    background-color: blue; 
}  

結果應該是這樣的（在下面的例子中，假定沒有空間來包含"ext."子的#left元件，並且其被替換爲省略號）：

--------------------------WINDOW EDGE-------------------------- 
|        |        | 
|        |        | 
W       (75 px)       W 
I        |        I 
N        |        N 
D +—————————————————————————————————————————————————————————+ D 
O | It is the primary t...| Hi! |some content   | O 
W +—————————————————————————————————————————————————————————+ W 
    <- - - - - - - - - - - - -(95 vw)- - - - - - - - - - - - -> 
E                E 
D                D 
G                G 
E                E 

請注意，左側/右側邊框#container與窗口左側/右側邊緣之間的距離應該相等：(100vw - 95vw)/2 = 2.5vw。
如何做到這一點？我已經閱讀了關於如何居中元素的所有可能的解釋，但是找不到解決這個特定問題的答案......我所看到的只是對每個元素應用預定義的維度，然後獨立地對每個元素進行絕對定位...這不是我想要的。

Answer 1

您將需要使用display:flexbox;創建一個「完美中心divs」。

#container { 
    display: flex; 
    width: 95vw; 
    background-color: white; 
    position: absolute; 
    top: 75px; 
    justify-content: center; 
    flex-flow: row nowrap; 
    left: 0; 
    right: 0; 
    margin:auto; 
} 

#center { 
    display: inline-block; 
    background-color: green; 
    padding-left: 10px; 
    padding-right: 10px; 
    align-self: center; 
    text-align: center; 
    animation: center; 
    width:auto; 
} 

#left { 
    display: inline-block; 
    background-color: red; 
    padding-left: 10px; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    width: 35%; 
    flex-grow: 1; 
} 

#right { 
    display: inline-block; 
    background-color: blue; 
    flex-grow: 1; 
    width: 35%; 
} 

請注意：您需要同樣地定義#left和#right寬度，才能使它完美居中。

演示在這裏：https://jsfiddle.net/usytj8gm/3/