Angular Material Mat-icon-Button，在Ionic中垂直对齐文本

Question

我正在使用Ionic-Cordova和Angular开发iOS和Android应用程序。

使用Web视图测试应用程序，可以在按钮内正确显示文本，但是当应用程序在移动设备上运行时（我仅在Andorid平台上对此进行了测试），文本不会居中。 我正在使用自定义字体来显示使用简单文本而不是图像的图像。

我试图修改按钮内跨度的css代码，获得相同的结果...在网络上正确显示，而在本机应用程序上错误显示。

一些HTML代码：

<div class="rightBar">
    <button mat-icon-button class="customFontH right_rightMiddleAlign">
      K
    </button>
</div>

.rightBar
{
  position: relative;
  float: right;
  width: 50%; 
  height: 100%;
  clear:both;

}

.right_rightMiddleAlign
{

  position: absolute;
  left : 100%;
  top: 50%;

  transform: translate3d(-100%, -50% ,0);

}

.customFontH
{
  font-family: customFontName;
  color: white !important;
  font-size: 150%;
}

:host ::ng-deep span.mat-button-wrapper {
    position: absolute;
    left: 50% !important;
    transform: translate3d(-50%, -50% ,0) !important;
    background-color: purple;
}

这是网络视图的外观（正确结果）：

这是本机视图的外观（错误结果）：

---

更新1：

按照@Monomachus的建议，我更新了CSS：

:host ::ng-deep span.mat-button-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    text-align: center;
    display: flex;
    align-items: center;
    align-content: center;
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    background-color: purple;
    line-height: 100%;
}

.customFontH
{
  font-family: farmaH24;
  color: white !important;
  font-size: 150%;
  align-content: center;
  -webkit-align-self: center; /* Safari 7.0+ */
  align-self: center;
}

但是问题仍然存在，网络视图仍然正确，原生视图仍然存在错误。