如何在Safari中將Flex容器的絕對定位的子代居中居中？

Question

我有一個既包含圖像又包含一些文本的容器。 我希望文本在圖像的中間垂直和水平居中。

似乎最簡單，具有前瞻性的方法是使用Flexbox和文本的絕對定位：

 .container { display: flex; justify-content: center; align-items: center; position: relative; } .text { position: absolute; } 

 <div class='container'> <div class='text'> This should be centered </div> <img src="https://placehold.it/250x250" /> </div> 

文本在兩個軸上居中。 這似乎適用於所有現代瀏覽器.....除了Safari。

Safari似乎根本沒有將文本居中。 它只是位於容器的頂部/左側，就像普通的絕對定位元素將處於非flexbox布局中一樣。

Safari（錯誤）：

所有其他瀏覽器（正確）：

我以為Flexbox已經為黃金時段做好了充分的准備，但是考慮到有多少人在iOS上使用Safari，這似乎是一筆大買賣。 Flexbox應該擅長將內容水平和垂直居中。

我唯一真正的選擇是不使用Flexbox，然后使用：

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

但是出於漸進的原因，我寧願使用Flexbox。

我在這里想念什么嗎？ 盡管我不願意提出要求，但這里是否有一些僅適用於Safari的解決方法？ 除了“不使用flexbox”之外，還有其他解決方案嗎，因為如果這是2017年中期的答案，那將令人失望。

JSFiddle供參考： https ://jsfiddle.net/z7kh5Laz/4/

Answer 1

當談到Flexbox和絕對定位時，有一些要做和不應該做的事情，在這種情況下，Safari不會將其他瀏覽器的絕對定位元素居中。

您可以將Flexbox和transform: translate結合使用transform: translate ，因為后者不會影響前者，並且當時代到來時，它們的行為與單獨的Flexbox相同，您只需放下transform / left / top部分。

 .container { display: flex; justify-content: center; align-items: center; position: relative; } .text { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 

 <div class='container'> <div class='text'> This should be centered </div> <img src="https://placehold.it/250x250"/> </div> 

Answer 2

恭喜，您的問題中存在一些錯誤的假設：

• “ Safari（錯誤）：[image]” -Safari不一定是錯誤的。
• “所有其他瀏覽器（正確）：[image]” -其他瀏覽器不一定正確。
• “我認為Flexbox已經為黃金時段做好了准備。” -是的。 98％的瀏覽器支持flexbox 。
• “將內容水平和垂直居中是Flexbox的專長。” - 它是。

我在這里想念什么嗎？

是的，在規范中該部分表示絕對放置的伸縮項目會忽略伸縮屬性。

4.1。 絕對定位的Flex子級

Flex容器的絕對定位的子代不參與Flex布局。

如果某些瀏覽器選擇將flex屬性應用於絕對定位的flex項目，那就是他們的選擇。 但是，如果瀏覽器忽略了此類元素的flex屬性，則並不一定意味着它們違反了規范。

在閱讀規范的整個部分時，似乎並沒有明確的對與錯。

為了獲得更穩定和可靠的解決方案，請不要使用flex屬性來定位流出的元素。 改用CSS定位屬性：

• 在Flexbox中將文字居中放置在圖像上