我知道这是几岁，但是在为项目编写一个重置样式表时，我会在进行一些调查后添加我的想法。

注意**这是基于浏览Firefox源代码，因为它是最简单的获取和阅读。然而，基于其他浏览器中的类似行为，实现可能相似。

首先，这里的主要问题是< button>元素 – 至少在Firefox中 – 内部元素之间构建了< button>标签是它的孩子。在Firefox中，它被称为moz-button-content，并不是可以通过CSS达到的东西，并且已设置为显示块而不继承按钮的高度，您可以在useragent stylesheet中看到此样式声明

因为您不能影响此元素上的任何样式，您将被迫在< button>上添加样式。标签。这导致第二个问题 – 浏览器是hard coded to vertically position内容的按钮。

考虑到这两个问题，您可以开始看到按钮如何强制内容居中，考虑：

tag

+------------------------+ ^

| button extra space | |

| | |

+------------------------+ |

|| ::moz-button-content || | button height

|| display: block; || |

+------------------------+ |

| | |

| button extra space | |

+------------------------+ v

如果你给按钮一个高度 – 像你的小提琴的48px，文本将会居中，因为moz-button-content元素是显示块，只有内容的高度(很可能是内容的行高)默认情况下)，当放在另一个元素旁边时，会得到这样的行为：

* {

box-sizing: border-box;

margin: 0;

border: 0;

padding: 0;

font-family: san-serif;

background: none;

font-size: 1em;

line-height:1;

vertical-align: baseline;

}

button, a {

height: 3em;

}

button {

background: red;

}

a {

display:inline-block;

background: green;

}

Button content

Link Content

This bug和this bug在Firefox问题跟踪器是关闭，我可以找到任何实际记录的错误。但是线程给人的印象是，尽管没有出现任何实际的规范，但浏览器已经以这种方式实现了这一点，因为其他浏览器正在这样做“

如果您真的想要更改默认行为，则可以解决问题，但根据实现情况，它不能完全解决问题和YMMV问题。

如果插入包装器< span>使用display：block作为按钮的唯一子项，将所有内容放在其中，您可以使用它来跳过moz-button-content元素。

您将需要使这个< span>元素具有height：inherit，因此它正确地填充了按钮的高度，然后将正常的按钮样式添加到< span>相反，您将基本获得所需的行为。

* {

box-sizing: border-box;

margin: 0;

border: 0;

padding: 0;

font-family: san-serif;

background: none;

font-size: 1em;

line-height:1;

vertical-align: baseline;

}

button, a {

height: 3em;

}

button {

background: red;

}

button::-moz-focus-inner {

border: 0;

padding: 0;

outline: 0;

}

button > span {

display: block;

height: inherit;

}

a {

display:inline-block;

background: green;

}

button.styled > span , a.styled{

padding: 10px;

background: yellow;

}

Button content

Link Content

Button content

Link Content

还有一点值得一提的是appearance的CSS4规则(还没有提供)：

虽然这不是一个可行的选择(截至1月5日)。有一个建议，重新定义CSS4草案中的外观规则，可能实际上做正确的事情，删除浏览器做出的所有假设。我只提到它的完整性，因为它可能在未来变得有用。

更新 – 30/08/2016您应该实际使用< span>而不是< div>，因为div对于< button>不是有效的孩子元素。我已经更新了答案以反映这一点。