I have bee trying to do a close button using CSS in order to close a tag.
I have done this using a compination of a pattern described here: [Patterns for Closebuttons](https://www.htmhell.dev/20-close-buttons/), and a css only pattern for creating an X [Close Button using CSS](https://stackoverflow.com/questions/18611195/x-close-button-only-using-css).

Now to my question:
I can't figure out why the X is not entierly centered.
If I change the placement to 50% of whatever width I'm using for the lines it seemes fine, thus I come to the conclusion it has to have something to do with the width of the lines.

I'm writing here to see if someone could explain this to me.

```
'HTML
<button type="button" aria-label="Close">
  <span aria-hidden="true" class="close"></span>
</button>

'CSS
button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  padding: 0px;
  background-color: rgb(192,192,192);
  border: none;
  color: white;
 text-decoration: none;
 height: 150px;
 width: 150px;
 border-radius: 50%;
}
button:hover {
  background-color: rgb(146, 146, 146);
  cursor: pointer;
}

.close {
  position: relative;
  /* right: 10px; */
  width: 60%;
  height: 60%;
}
.close:before, .close:after {
  position: absolute;
  content: ' ';
  height: 100%;
  width: 20px;
  background-color: rgb(255, 255, 255);
}
.close:before {
 transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

```

I created a codepen for simplicity: [Codepen link](https://codepen.io/SweCurium/pen/eYgobOW)