How to center div apparently inside canvas?

Question

I'm making a snake game with JavaScript and I'm trying to add the 'pause menu' feature. I manage to make the menu appear when the user clicks the pause icon, but I wish I could make the menu appear centered inside the canvas where the game is rendered. This is what I got:

How can I make it look like it is centered inside the canvas? I know I can accomplish that by setting the margin-left, margin-right, etc to a certain number , but that doesn't work well in my case because my website is supposed to be responsive to window resize. I want that menu to maintain almost the same dimensions whatever is the width of the window. Here is the HTML:

<div class="body-divs">
    <div id="score-div">
        <span id="score-text"></span>
        <span id="level-text"></span>
        <button id="pause-button"><i id="pause-resume-icon" class="fa fa-pause" aria-hidden="true"></i></button>
    </div>
    <div id="pause-menu">
        <span class="menu-text"> Paused </span>
        <div id="game-menu-div-4">
            <button class="game-menu-button" id="resume-button"> Resume </button>
            <button class="game-menu-button" id="back-button"> Main Menu </button>
        </div>       
    </div>
    <canvas class="body-divs" id="stage" width="600" height="600">
    </canvas>
</div>

And here is the CSS:

.body-divs, #score-div{
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 5%;
}

#pause-menu {
    position: absolute;
    font-family: 'Manaspace';
    padding: 10px;
    background-color: yellow;
    text-align: center;
    max-width: 250px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-color: gold;
    border-radius: 4px 4px;
}

#resume-button, #back-button {
    margin: 10px;
}

#resume-button {
    font-size: 22px;
}

#back-button {
    font-size: 15px;
}

Answer 1

You can put #pause-menu and the canvas in shared .container parent who has position: relative and then center the #pause-menu using position: absolute along with top: 50%; left: 50%; transform: translate(-50%, -50%)top: 50%; left: 50%; transform: translate(-50%, -50%) top: 50%; left: 50%; transform: translate(-50%, -50%) to center it over the canvas . Example:

 .container { position: relative; } #pause-menu { position: absolute; font-family: 'Manaspace'; padding: 10px; background-color: yellow; text-align: center; max-width: 250px; width: 100%; margin-left: auto; margin-right: auto; border-style: solid; border-color: gold; border-radius: 4px 4px; top: 50%; left: 50%; transform: translate(-50%, -50%); } #resume-button, #back-button { margin: 10px; } #resume-button { font-size: 22px; } #back-button { font-size: 15px; }

 <div id="score-div"> <span id="score-text"></span> <span id="level-text"></span> <button id="pause-button">pause</button> </div> <div class="container"> <div id="pause-menu"> <span class="menu-text"> Paused </span> <div id="game-menu-div-4"> <button class="game-menu-button" id="resume-button"> Resume </button> <button class="game-menu-button" id="back-button"> Main Menu </button> </div> </div> <canvas class="body-divs" id="stage" width="600" height="600"></canvas> </div>

Answer 2

#pause-menu {
position: relative;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.