Estoy tratando de colocar un elemento div sobre un lienzo (es para un juego) en el centro de mi página. Es sobre una pantalla de inicio que quiero mostrar sobre el lienzo, antes de comenzar el juego (esta pantalla de inicio tiene opciones como "Jugar juego", "Configuración", etc.) El problema es que no puedo hacer esto, he buscado mucho en Google, he visto muchos ejemplos, pero ninguno de ellos parece estar funcionando para mí. Aquí está mi código:

<div id="gamecontainer">
            <canvas id="myCanvas" width="800" height="600">
                Sorry, <strong>CANVAS</strong> is not supported by your browser. Get a more recent one to play my game!
            </canvas>

            <div id="gamestartscreen" class="gamelayer">
                <img src="images/icons/play.png" alt="Play Game" onclick="alert('ceve');"><br>
                <img src="images/icons/settings.png" alt="Settings">
            </div>
</div>

Aquí está el css:

#gamecontainer {
    width: 800px;
    height: 600px;
    background-color: beige;
    border: 1px solid black;
    position: relative;
    margin: 0 auto;
}

.gamelayer {
    width: 800px;
    height: 600px;
    position: absolute;
    display: none;
    z-index: 0;
}


/* Screen for the main menu (Like Play, Settings, etc.) */
#gamestartscreen {
    position: relative;
    margin: 0 auto;
}

#gamestartscreen img {
    margin: 10px;
    cursor: pointer;
}

¿Podría alguien decirme dónde lo estoy haciendo mal?