您的代码中没有指定行高。
尝试设置一个特定的行高。另外我建议，你通过行高而不是通过填充来居中文本。设置一个与按钮高度相同的行高。

• • 中央支助组**

.button {
    height: 40px;
    line-height: 40px;
}

当然，这只适用于单行文本。还可以看看this SO question

是否指定了专门用于移动的的媒体查询？您可能需要添加

// you can use any other value of screen width mobiles use like 640, 768
@media (max-width:480px){
    line-height: 15px;  // The line height you want to show on mobile
}

不是所有的浏览器都有默认设置，我几乎总是习惯在body元素上设置样式

body{
 font-size: 100%;
 line-height: 1.333%;
}

来处理这种事情。

今天我不得不使用一个 fancy font，我注意到它在 *chrome移动的 * 设备和 chrome desktop mobile emulator（devtools）上有不同的行高渲染。这显然是一个bug，无论是dekstop还是mobile chrome都需要报告。更改 line-heights 是一个可以修复的选项，但是如果你有很多元素，它会很麻烦。经过一番挖掘，我发现了这个属性

ascent-override: 92%; /* play with values */
descent-override: 10%; /* one might not be needed */

此外，由于我需要为移动的chrome只更改字体，我尝试了媒体查询，它的工作。

@media (max-width: 1000px) {
  @font-face{
    font-family:'FancyFont';
    src:url('fonts/FancyFont.ttf');
    font-weight:400;
    ascent-override: 92%;
  }
}