这确实是浏览器默认样式差异导致的常见问题，不是你遗漏了关键属性——Chrome和Firefox对于行内元素的垂直对齐逻辑有细微区别，才造成了这种不一致的表现。

问题根源 #

<a>标签默认是行内元素（inline）：

• Chrome会自动让行内元素的文本在padding区域内垂直居中
• Firefox则是让行内元素的文本默认和基线对齐，当你给a标签加上上下padding后，文本就会紧贴顶部，看起来没有居中

快速修复方案 #

你只需要给<a>标签添加一个display属性，把它改成行内块级元素（inline-block）或者块级元素（block），就能统一跨浏览器的垂直对齐表现：

修改后的CSS代码：

a {
  border: 1px solid #FF6600;
  border-radius: 4px;
  padding: 12px 20px;
  background: transparent;
  text-decoration: none;
  color: #FF6600;
  /* 新增这一行 */
  display: inline-block;
}

其他可选方案 #

如果需要更灵活的居中控制，也可以用Flex布局：

a {
  /* 其他样式保持不变 */
  display: flex;
  align-items: center;
  justify-content: center;
}

这种方式不管按钮内文本行数多少，都能完美垂直居中，适合更复杂的按钮场景。

修改后再测试，Firefox和Chrome里的按钮文本就都会垂直居中了～

内容的提问来源于stack exchange，提问作者j0weiss