如何让圆形按钮内文本垂直居中？解决短横线对齐异常问题

我正尝试使用CSS创建可调整大小的按钮（点击事件后续添加）。目前效果接近预期，但最后一个仅含短横线的按钮中文本未垂直居中，前两个按钮（+、×）的文本已按预期垂直居中。请问我哪里操作有误？我猜测可能是该字体中短横线的固有设计问题，若真是如此，能否推荐一个可实现垂直对齐的更合适的Unicode短横线字符？

当前代码 #

CSS代码 #

body {
  background-color: Aqua;
}

.button {
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  border: 2px solid black;
  display: block;
  font-size: 200%;
}

.button div {
  vertical-align: middle;
  font-weight: 800;
}

.button:not(:last-child) {
  margin-bottom: .4cm;
}

HTML代码 #

<body>
  <div style="text-align:center">
    <h1>Resizer Buttons</h1>
    <span class="button"><div>+</div></span>
    <span class="button"><div>×</div></span>
    <span class="button"><div>–</div></span>
  </div>
</body>

1. 修正CSS实现垂直居中 #

你当前的vertical-align: middle无效，因为div是块级元素，该属性对块级元素不生效。改用Flexbox布局可以彻底解决字符居中问题，不受字符本身字体基线的影响：

修改后的CSS：

body {
  background-color: Aqua;
}

.button {
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  border: 2px solid black;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 200%;
  font-weight: 800;
}

.button:not(:last-child) {
  margin-bottom: .4cm;
}

同时可以简化HTML，去掉嵌套的div：

<body>
  <div style="text-align:center">
    <h1>Resizer Buttons</h1>
    <span class="button">+</span>
    <span class="button">×</span>
    <span class="button">–</span>
  </div>
</body>

2. 推荐Unicode短横线字符 #

如果想换更适合垂直对齐的短横线，可选以下几个：

• HYPHEN-MINUS：-（普通键盘短横线，多数字体中基线居中表现稳定）
• FIGURE DASH：‑（为数字设计的短横线，垂直对齐一致性更好）
• EN DASH：–（你当前使用的字符，配合Flex布局即可正常居中）

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