Text is not aligned on the button - css

Question

it has a button that will be used to open a content. Then when it is opened, the button text is changed to "-" and when it closes to "+".
I can't use icons!
Anyway, the "-" or "x", are not aligned on the button. I've used flex display, tested several things and I can't, someone help me please
document.getElementById("btn").addEventListener("click", (event) => {
let button = event.target;
if (button.innerText == "-") {
button.innerText = "+";
} else {
button.innerText = "-";
}
})
* {
margin: 0;
padding: 0;
}
div {}
#btn {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
border: 0;
font-size: 40px;
font-weight: 600;
background-color: red;
}
<div id="div">
<button id="btn">
x
</button>
</div>

Answer 1

You just have to add a width property.
.btn {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border: 0;
font-size: 40px;
background-color: red;
}
<button class="btn">+</button>
<br/>
<button class="btn">−</button>
<br/>
<button class="btn">×</button>
Notes:
The minus symbol is not the dash -, and the close symbol is also not X since they will be misaligned. Copy the symbol from the above code directly.
Symbol references
https://en.wikipedia.org/wiki/Plus_and_minus_signs
https://en.wikipedia.org/wiki/X_mark
PS: Some code that is not in use in the answer have been removed from the snippet copied from question.

Answer 2

My suggestion:
button {
background-color: red;
border: 0;
font-size: 28px;
font-weight: bold;
margin: 0 5px 0 5px;
padding: 10px;
vertical-align: middle;
text-indent: 3px; /* for perfect horizontal centering, with some fonts */
}
<button>+</button>
<button>−</button>
<button>×</button>