Div容器内文本在移动端未垂直居中的跨端兼容问题求助

大家好，我碰到了一个div容器内文本对齐的问题，想问问有没有朋友能帮忙分析下原因？特别费解的是，这个效果在桌面端Chromium浏览器上完全正常，但到了任何移动端设备上就出问题了。

下面我放了两张截图，能清楚看到.button__foreground__text这个div内文本对齐的差异——移动端浏览器里的文本总是比桌面端Chromium里的靠上很多。

相关代码 #

CSS 样式

.button__foreground {
  grid-area: row0 / col0 / row1 / col1;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: lib.$stroke-width;

  height: 100%;
}

.button__foreground__text {
  display: inline-block;
  line-height: 1;
  border: black solid 1px;
  font-family: "Consolas";
  font-size: 1rem;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

.button__foreground__svg {
  display: grid;
  place-content: center;
  margin-top: auto;
  margin-bottom: auto;
}

HTML 结构

<div class="button__foreground">
  <div class="button__foreground__svg">
  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <rect width="20" height="20" fill="red" />
  </svg>
  </div>
  <div class="button__foreground__text">
    SIGN IN
  </div>
</div>

效果对比 #

• 移动端Safari 显示效果：可以看到文本没有在div内居中，安卓Chrome上也是同样的情况。
  

• 桌面端Chromium 显示效果：这个是正常的，文本在div内垂直居中了。
  

备注：内容来源于stack exchange，提问作者Lukas