如何垂直居中<a> element within a flex div?

Question

Why can I center a button with flex but not a link?

#quote-btn-div {
  display: flex;
}
#quote-btn,
#twitter-link {
  background-color: #999;
  /* Green */
  border: none;
  width: 300px;
  height: 100px;
  margin: 0 auto;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
#twitter-link {
  background-color: red;
}

<div id="quote-box">
  <div id="quote-btn-div">
    <button id="quote-btn">New Quote</button>
    <a id="twitter-link">Twitter link</a>
  </div>
</div>

Sorry if this is a stupid question, I'm still learning.

Answer 1

line-height通常用于垂直居中单行文本。由于您已在按钮上设置了高度，因此请将line-height设置为该值。

#twitter-link { line-height: 100px; }

#quote-btn-div {
  display: flex;
}
#quote-btn,
#twitter-link {
  background-color: #999;
  /* Green */
  border: none;
  width: 300px;
  height: 100px;
  margin: 0 auto;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
#twitter-link {
  background-color: red;
  line-height: 100px;
}

<div id="quote-box">
  <div id="quote-btn-div">
    <button id="quote-btn">New Quote</button>
    <a id="twitter-link">Twitter link</a>
  </div>
</div>

Answer 2

#twitter-link {
  line-height: 100px;
}