html - 无法在圆形按钮中垂直居中文本

Question

我一直在尝试创建一个简单的圆形按钮，当您将鼠标悬停在它上面时，它会旋转 90 度。我已经让它大部分工作了，但是按钮内的 + 似乎没有正确居中，即使我正在使用 align-items: center;我认为这会完美地将元素内的文本垂直居中。

这是我的代码:

body {
  background: black;
}

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 2px solid lime;
  font-size: 1.5em;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  color: lime;
  transition: all .4s ease;
  cursor: pointer;
}

button:hover {
  transform: rotate(90deg);
}

<button>+</button>

从旋转可以看出，它肯定没有正确居中。任何提示将不胜感激!

编辑:显然其他人没有看到我的问题，所以这是一个 GIF:https://imgur.com/a/K9IXmlN

Answer 1

使用来自 fontawesome.com 之类网站的加号图标，并使用 flex 将其居中:

body {
  background: black;
}

button {
 background: transparent;
    border: 2px solid lime;
    font-size: 1.5em;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    color: lime;
    transition: all .4s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

button > .fa-plus{
  font-size:16px;
}

button:hover {
  transform: rotate(90deg);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">


<button>
<i class="fa fa-plus"></i>
</button>