将固定按钮居中div

Question

我有一个div，里面有一些元素。

我想将开始按钮恰好位于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

left: 50% 使元素的x坐标位于屏幕中间。

您真正想要的值是

´左：（50％-[元素宽度/ 2]）´

因此您的x坐标将位于中间的左侧一点，因此您的元素可以位于中间

Answer 2

在position: relative;类中添加.board，并从.startButton中删除所有css样式，并在.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>