Mengapa teks dalam program HTML tidak boleh dipaparkan secara mendatar dan berpusat?

Question

Saya sedang cuba mengekod permainan Ular saya sendiri dan ingin tajuk dan imej permainan sebenar berada di tengah-tengah tapak. Selepas saya cuba memasukkan butang untuk memulakan semula permainan, semuanya rosak. Walaupun saya cuba membuat asal semua perubahan, saya nampaknya tidak dapat membawa teks ke tengah. Selain itu, gameOverMessage 1) tidak disembunyikan sama sekali dan 2) tidak menggunakan sebarang perubahan gaya yang saya gunakan dalam JavaScript. Saya seorang pemula yang lengkap jadi sebarang nasihat akan sangat dihargai dan dihargai!

Berikut ialah skrip CSS saya menggunakan semua elemen yang berkaitan:

#snakeboard {
    kedudukan: relatif;
    atas: 50%;
    kiri: 500px;
    mengubah: terjemah(-50%, -50%);
    indeks-z: -1;
}

#gameOverMessage {
    indeks-z: 1;
    text-align: tengah;
    kedudukan: relatif;
    saiz fon: 150px;
    color:rgb(235, 28, 28);
    font-weight: tebal;
}

.tersembunyi {
    paparan: tiada;
}

Untuk masalah yang saya hadapi dengan mesej game over, saya memasukkan class = "hidden" dan kemudian mengalih keluar teg ini selepas fungsi has_game_ended Namun atas sebab tertentu ini tidak didaftarkan. 
Permainan Ular Saya
Skor:



    permainan tamat!


Padamkan kelas "tersembunyi"
function main() {
    menukar_arah = palsu;
    clear_board();
    drawFood();
    drawSnake();
    move_snake();

    jika (!telah_permainan_berakhir()) {
        setTimeout(utama, 200);
    } lain {
        const gameOverMessage = document.getElementById("gameOverMessage");
        gameOverMessage.classList.remove("tersembunyi");
    }
}

Answer 1

Ini adalah kod anda, daripada apa yang saya lihat ia nampaknya berfungsi sepenuhnya. Apa yang saya lakukan di sini ialah menambah butang untuk menogol kelas 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>