Centering fixed button inside a div - html

Question

I have a div with some elements inside.
I would like to center the start button exactly in the middle of the div. I've tried making it fixed like this:
Board.css
.board{
width: 400px;
height: 400px;
margin: 150px auto 0;
border: 5px solid black;
border-radius: 5px;
background-color: darkgray;
display: flex;
flex-wrap: wrap;
}
.startButton {
position: fixed;
left: 50%;
top:50%;
}
#media(max-width: 650px) {
.board {
width: 300px;
height: 300px;
margin: 150px auto 0;
border: 5px solid black;
border-radius: 5px;
}
}
But as you can see, it is not perfectly aligned in the middle. How do I go about this? I've also made a media-query that makes the div smaller on smaller devices, so it needs to be responsive as well.
Board.js
render() {
return (
<div className="board">
<button className="startButton">Start Game!</button>
<Square clicked={this.squareClickedHandler} val={this.state.squareOne} />
<Square clicked={this.squareClickedHandler} val={this.state.squareTwo} />
<Square clicked={this.squareClickedHandler} val={this.state.squareThree} />
<Square clicked={this.squareClickedHandler} val={this.state.squareFour} />
</div>
)
}

Answer 1

Add position: relative; in .board class and remove all css styles from .startButton and add following code in .startButton
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Try following code
.board{
position: relative;
width: 400px;
height: 400px;
margin: 150px auto 0;
border: 5px solid black;
border-radius: 5px;
background-color: darkgray;
display: flex;
flex-wrap: wrap;
}
.startButton {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#media(max-width: 650px) {
.board {
width: 300px;
height: 300px;
margin: 150px auto 0;
border: 5px solid black;
border-radius: 5px;
}
}
<div class="board">
<button class="startButton">Start Game!</button>
</div>

Answer 2

left: 50%
makes the element's x-coördinate be in the middle of your screen.
The value you actually want is
´left: (50% - [element width / 2]) ´
so your the x-coördinate will be a little to the left of the middle so your element can be in the middle