Не может вертикально центрировать текст в круглой кнопке

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

Код кажется мне подходящим, но я думаю, что я понимаю, что вы видите, проблема в том, что шрифт, который вы используете для отображения символа «+», больше по оси x, поэтому, когда вы поворачиваетепосмотрите, как будто он движется вертикально, но это всего лишь иллюзия, я пока не могу загрузить изображения, но попробуйте сами, и вы тоже это увидите.

Возможно, работа с другим шрифтом может помочь.

Answer 2

Используйте значок плюса с сайта, такого как 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>