CSS變換翻譯在Messenger應用

Question

我用這個代碼，垂直和水平居中一個div：

#divname { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
} 

它可以在大多數瀏覽器的移動和臺式機，並在Facebook的應用程序打開時，在內部它看起來不錯。

但是，當使用Facebook Messenger應用程序打開鏈接時，transform: translate CSS規則不起作用。

如何使這項工作的Facebook Messenger應用程序？

Answer 1

這是一個長鏡頭，但你可以嘗試重新排序變換屬性，因爲瀏覽器可能有不同的實現的實際屬性和供應商名稱：（Source）

#divname { 
    position:absolute; 
    top:50%; 
    left:50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

您也可以嘗試彎曲，現在它有decent support。

HTML：

<div class="parent"> 
    <div> 
    I'm centered both vertically and horizontally 
    </div> 
</div> 

CSS：

.parent { 
    height: 200px; 
    border: 1px solid red; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

JSFiddle