如何在Safari中將flexbox容器中的固定內容居中？

Question

Following code按預期工作（塊居中）在Chrome和Firefox，但在Safari子容器稍微偏離：

#container { 
    width: 100%; 
    background: yellow; 
    height: 20px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: flex; 
    justify-content: center; 
} 

#content { 
    padding: 0px; 
    background: linen; 
    position: fixed; 
} 

我的問題是 - 如何中心「的立場：固定「元素在」顯示器：flexbox「家長在Safari？

Answer 1

帶有position: fixed（或position: absolute）的元素在Safari中的行爲與他們在Chrome/Firefox中的行爲不同。

在Safari中居中柔性項目，你需要使用transform: translate

Updated codepen

棧片斷

#container { 
 
    width: 100%; 
 
    background: yellow; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
#content { 
 
    padding: 0px; 
 
    background: linen; 
 
    position: fixed; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<div id="container"> 
 
    <div id="content">THIS CONTENT IS NOT CENTERED IN SAFARI</div> 
 
</div>