如何将 div 明显置于 canvas 的中心？

Question

我正在使用 JavaScript 制作贪吃蛇游戏，我正在尝试添加 'pause menu' 功能。当用户单击暂停图标时，我设法使菜单出现，但我希望我可以使菜单显示在呈现游戏的 canvas 内居中。这是我得到的：

如何让它看起来像在 canvas 中居中？ 我知道我可以通过将 margin-left、margin-right 等设置为某个数字 来实现这一点，但这对我来说效果不佳，因为我的网站应该响应 window 调整大小。无论 window 的宽度如何，我希望该菜单保持几乎相同的尺寸。这是 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>

这里是 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

#pause-menu {
position: relative;

一个位置为绝对的元素；相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

但是；如果绝对定位元素没有定位的祖先，它使用文档主体，并随着页面滚动移动。

Answer 2

您可以将 #pause-menu 和 canvas 放在具有 position: relative 的共享 .container 父级中，然后使用 position: absolute 将 #pause-menu 居中与 top: 50%; left: 50%; transform: translate(-50%, -50%) 一起将其置于 canvas 的中心。示例：

.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>

如何将 div 明显置于 canvas 的中心？

How to center div apparently inside canvas?

html

javascript

css

layout