Center CSS X button - html

Question

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, and a css only pattern for creating an X Close Button 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

Answer 1

Just add flexbox to the .close class and you're ready to go
.close {
position: relative;
width: 100%;
height: 60%; // 100% means that both lines will take the entire space
display: flex;
align-items: center;
justify-content: center;
}
The width of the .close:before, .close:after CSS rule is actually letting both lines "expand" horizontally, starting from the center.
But, as they are being rotated, their starting position is not the same as if they were not rotated, so that's why their alignment becomes non-centered. You can inspect the item and you will see that the actual box has an empty space, which is the "rotated width" empty space.
Consider a x = 0 coordinate (0px from CSS box left margin) which is the horizontal starting point of the CSS box; rotating elements will make content to start at x = ? (usually half of the content width)
You could solve this issue also by setting a negative margin-left with its value being half the width, but using flexbox will require much less maintenance (just imagine working with UI/UX guys telling you to change its dimensions)

Answer 2

Add This CSS left:50%; margin-left:-10px; on .close:before, .close:after
.close:before, .close:after {
position: absolute;
content: ' ';
height: 100%;
width: 20px;
background-color: rgb(255, 255, 255);
left:50%;
margin-left:-10px;
}

Answer 3

Hello there try to add this to your span class .close:
display: flex;
justify-content: center;
align-items: center;
You should not use right or left when your attribute is relative.