为什么按钮中的文本总是垂直居中？

Question

我想将 div 设置为与按钮完全一样的样式。我注意到当我给按钮一个特定的高度时，文本总是垂直居中。

到目前为止，我尝试挖掘 Chromium 用户代理样式表，但没有成功。 -webkit-appereance: button 也没有成功。

这是该问题的演示：https://codepen.io/franzskuffka/pen/QzqKQx。请注意，inline-block 样式可确保文本垂直对齐 - 边界框仍然很奇怪。

哪个属性使文本垂直居中而不需要任何额外的包装？这是怎么回事？

Answer 1

TL;DR：不可能使用 CSS 重新创建由 <button> 元素创建的布局。或者至少它隐藏得很好。

我通过将 <button> 上的显示值更改为 flex 来测试这一点，它影响了垂直对齐。 display:block 等其他值没有效果。似乎没有css值，这只是默认行为，没有办法为div做。

和你一样，我也在寻找这个问题的答案。我试图找到在按钮中垂直居中内容的 css 属性。当我几乎放弃时，我决定浏览 html 规范，这就是我发现的：

如果元素是输入元素，或者如果它是按钮元素并且 'display' 的计算值不是 'inline-grid', 'grid', 'inline-flex' 或 'flex'，则元素的盒子有一个子匿名 具有以下行为的按钮内容框：

1. 盒子是一个块级的块容器，它建立一个新的 块格式化上下文（即“显示”是“流根”）。
2. 如果框在水平轴上没有溢出，那么它是 水平居中。
3. 如果盒子在垂直轴上没有溢出，那么它是 垂直居中。否则，没有匿名按钮内容框。

https://html.spec.whatwg.org/multipage/rendering.html#button-layout

Answer 2

如果您的按钮没有固定高度，您可以向 div 添加填充以使文本垂直居中。添加text-align: center; 使您的文本水平居中。

.btn {
  background-color: #000;
  color: #fff;
  padding: 10px;
  text-align: center;
}

<div class="btn">Hello!</div>

对于具有固定高度的按钮，您可能必须有一个子元素。

.parent {
  background-color: #000;
  color: #fff;
  height: 100px;
  text-align: center;
  width: 100px;
}

.child {
  top: 50%;
  transform: translateY(-50%);
}

<div class="parent">
  <div class="child">Hello!</div>
</div>

还有其他几种方法，但这些是我常用的方法。如果您想尝试更多方法，CSS-Tricks 有一个完整的 CSS 居中指南：https://css-tricks.com/centering-css-complete-guide/。