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

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>

Answer 2

代码对我来说似乎没问题，但我想我明白你在看什么，问题是你用来显示“+”符号的字体在 x 轴上更大，所以当你旋转视图它看起来像在垂直移动，但这只是一种错觉，我还不能上传图片，但你自己试试吧，你也会看到的。

使用不同的字体可能会有所帮助。

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

Can't vertically center text in round button

html

css

centering