Центрирующая фиксированная кнопка внутри div

Question

У меня есть div с некоторыми элементами внутри.

Я бы хотел центрировать кнопку запуска точно по центру деления.Я пытался исправить это так:

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;
    }
}

Но, как вы можете видеть, он не идеально выровнен по центру.Как мне это сделать?Я также сделал медиа-запрос, который уменьшает div на меньших устройствах, поэтому он также должен быть отзывчивым.

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

Добавьте position: relative; в .board класс и удалите все стили CSS из .startButton и добавьте следующий код в .startButton

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Попробуйте следующий код

.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% позволяет элементу x-coordinate быть в центре экрана.

Значение, которое вы на самом деле хотите, равно

´left: (50% - [ширина элемента / 2]) ´

, поэтому ваш x-coördinate будет немногослева от середины, так что ваш элемент может быть в середине