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>