html - 在 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>
    )
}

标签： htmlcsspositioncss-position

Answer 1

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

你真正想要的价值是

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

所以你的x坐标会在中间的左边一点，所以你的元素可以在中间