<button>的内容垂直居中，但内容<a> not, why?

Question

I have an anchor tag and a button tag, both styled button-like. However, while the "b" of the button is vertically centered, the "a" is not. Why? Which css property did I forget?

.c-btn {
  display: inline-block;
  vertical-align: middle;
  font-family: "Helvetica", sans-serif;
  text-align: center;
  margin: 0;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none;
  border: 1px solid currentColor;
  width: 100px;
  height: 100px;
  font-size: 24px;
  background-color: transparent;
  color: blue;
}

<a class="c-btn" href="#">a</a>
<button class="c-btn">b</button>