Safariでフレックスボックスコンテナの固定コンテンツを中心に置く方法は？ ChromeとFirefoxのではなく、Safariの子コンテナに（ブロックを中心に）期待通り

Question

Following code作品はオフ少しです：

#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; 
} 

私の質問になります - どのように中央に「位置：固定Safariの "display：flexbox"親の要素ですか？

Answer 1

要素がposition: fixed（またはposition: absolute）の場合、Safariでは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; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

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