javascript - CSS:按钮上的文本稍微偏离中心

Question

我正在构建一个登陆页面，并有一个文本应居中的按钮，但它略高于中心。

.button {
  background-color: #ED5E93;
  font-weight: 800;
  font-size: 2rem;
  border: none;
  color: white;
  padding: 0 16px 0 16px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  height: 3rem;
}

<button type="button" className={indexStyles.button}>
       Get Started
    </button>

Answer 1

使用 Flex CSS 属性

button {
    display:flex;
    align-items:center;
    justify-content:center;
    background-color: #ED5E93;
    font-weight: 800;
    font-size: 2rem;
    border: none;
    color: white;
    padding: 0 16px 0 16px;
    text-decoration: none;
    cursor: pointer;
    height: 3rem;
}

<button type="button" className={indexStyles.button}>
   Get Started
</button>