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 坐标位于屏幕中间。

你真正想要的值是

´left: (50% - [元素宽度 / 2]) ´

所以你的 x 坐标会稍微偏向中间的左侧，这样你的元素就可以在中间

Answer 2

在.board中添加position: relative; class并从.startButton中删除所有css样式并在.startButton[=17中添加以下代码=]

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>

div 内的居中固定按钮

Centering fixed button inside a div

html

css

position

css-position