Can't vertically center text in round button

Question

I've been trying to create a simple round button that rotates 90 degrees when you hover over it. I've got it working for the most part, but the + inside the button doesn't seem to be centered properly even though I am using align-items: center; which I thought would perfectly center the text inside the element vertically.

Here is my code:

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>

As you can see from the rotation, it definitely is not centered correctly. Any tips would be appreciated!

EDIT: Apparently others aren't seeing my issue so here is a GIF: https://i.sstatic.net/pRLEi.jpg

Answer 1

Use a plus icon from a site like fontawesome.com and center it with 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>