HTML程序中的文本为什么无法水平居中显示？

Question

我目前正在尝试编写自己的贪吃蛇游戏，并希望标题和实际游戏图像位于网站的中心。在我尝试插入重新开始游戏的按钮后，一切都出现了故障。即使我试图撤消所有的更改，我似乎无法让文本居中。此外，gameOverMessage 1)根本没有被隐藏，2)没有应用我在JavaScript中应用的任何样式更改。我是一个完全初学者，所以任何建议都将非常感激和珍视！

这是我使用所有相关元素进行的CSS脚本：

#snakeboard {
    position: relative;
    top: 50%;
    left: 500px;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#gameOverMessage {
    z-index: 1;
    text-align: center; 
    position: relative;
    font-size: 150px; 
    color:rgb(235, 28, 28);
    font-weight: bold;
}

.hidden {
    display: none;
}

对于我遇到的游戏结束信息的问题，我插入了class = "hidden"，然后在has_game_ended函数被激活后删除了此标记。然而由于某种原因，这并没有被注册。

<h1 class="h1">我的贪吃蛇游戏</h1>
<p class="p1">分数:</p>
<div id="score"></div> 
<canvas id="snakeboard" width="400" height="400"></canvas>
<div id="gameOverMessage" class="hidden">
    游戏结束！
</div>

删除"hidden"类

function main() {
    changing_direction = false;
    clear_board();
    drawFood();
    drawSnake();
    move_snake();

    if (!has_game_ended()) {
        setTimeout(main, 200);
    } else {
        const gameOverMessage = document.getElementById("gameOverMessage");
        gameOverMessage.classList.remove("hidden");
    }
}

Answer 1

这是你的代码，从我所看到的来看，它似乎完全正常工作。我在这里所做的只是添加了一个按钮来切换hidden类。

function toggleHiddenClass(){
  document.querySelector('#gameOverMessage').classList.toggle('hidden');
}

#gameOverMessage {
    z-index: 1;
    text-align: center; 
    position: relative;
    font-size: 150px; 
    color:rgb(235, 28, 28);
    font-weight: bold;
}

.hidden {
    display: none;
}

<button type="button" onclick="toggleHiddenClass()">toggle hidden class</button>

<div id="gameOverMessage" class="hidden">
    Game Over!
</div>