信使应用程序中的 CSS 转换翻译

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信使应用程序？

Answer 1

这是一个很长的机会，但您可以尝试对转换属性重新排序，因为浏览器可能对实际属性和供应商前缀有不同的实现： （来源）

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

你也可以试试flex，现在它有不错的支持。

.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