Question

我有4个重叠的画布（作为图层）绝对定位并水平和垂直居中。

在这个画布上，我想在画布中心的一列中叠加四个HTML / CSS按钮（用于游戏菜单）。我是CSS和HTML的新手，我无法弄清楚如何让按钮居中放置在绝对定位的画布上。我怎样才能做到这一点？谢谢。

HTML：

<body>
    <canvas id="canvas0" width=800 height=600></canvas>
    <canvas id="canvas1" width=800 height=600></canvas>
    <canvas id="canvas2" width=800 height=600></canvas>
    <canvas id="canvas3" width=800 height=600></canvas>
</body>

CSS：

#canvas0,  #canvas1, #canvas2, #canvas3 {
    position: absolute;
    border: 2px solid;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

#canvas0 {
    z-index: 0;
}

#canvas1 {
    z-index: 1;
}

#canvas2 {
    z-index: 2;
}

#canvas3 {
    z-index: 3;
}

编辑：

以下是我想知道如何做的图。无论浏览器如何调整大小，按钮都保持在画布中心的中心位置。

enter image description here

第二次编辑：如果我满足于水平居中（而不是坚持垂直和水平居中），我可以做得非常好。

这篇文章对我很有帮助：Absolute Positioning Inside Relative Positioning

这是我的最终代码和jsfiddle演示。

<body>
<div id="container">
    <canvas id="canvas0" width=800 height=600></canvas>
    <canvas id="canvas1" width=800 height=600></canvas>
    <canvas id="canvas2" width=800 height=600></canvas>
    <canvas id="canvas3" width=800 height=600></canvas>
        <div id="menu">
            <button id="button1" type="button">Start</button>
            <button id="button2" type="button">Options</button>
            <button id="button3" type="button">High Scores</button>
        </div>
</div>
</body>

CSS：

#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    position: relative;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

#cavas0 {z-index: 0;}
#canvas1 {z-index: 1;}
#canvas2 {z-index: 2;}
#canvas3 {z-index: 3;}

#menu {
    position: relative;
    width: 250px;
    height: 200px;
    z-index: 4;
    top: 200px;
    left: 275px;
}

button {
    width: 200px;
    height: 50px;   
    font-size: 20px;
    position: absolute;
    z-index: 5;
}

#button1 {
    left: 25px;
}

#button2 {
    left: 25px;
    top: 75px;
}

#button3 {
    left: 25px;
    top: 150px;
}

Answer 1

也许就是这个问题。

这是一个演示<{3}}

追加此css

.buttonContainer{
    position: absolute;
    top: 40%;
    left:45%;
    width:80px;
}
.class='but' {
    float:left;
}

HTML

<body>
    <canvas id="canvas0" width=800 height=600></canvas>
    <canvas id="canvas1" width=800 height=600></canvas>
    <canvas id="canvas2" width=800 height=600></canvas>
    <canvas id="canvas3" width=800 height=600></canvas>
    <div class='buttonContainer'>
        <input class='but' id='but1' type='button' value='Button 1'>
        <input class='but' id='but2' type='button' value='Button 2'>
        <input class='but' id='but3' type='button' value='Button 3'>
        <input class='but' id='but4' type='button' value='Button 4'>
    </div>
</body>

Answer 2

我已经解决了你的问题，现在我终于在索普公园度过了一天。基本上......我拿了@Morne nel的代码并将top: 250px;更改为top: 40%。我不确定这是否以数学为中心，但你总是可以自己做。尽管如此，按钮仍保持在相对于canvas的位置。这是代码：

HTML：

<html>

<head>
    <title>Blah</title>
    <link rel="stylesheet" type="text/css" href="Style.css">
</head>

<body>

    <canvas id="canvas0" width=800 height=600></canvas>
    <canvas id="canvas1" width=800 height=600></canvas>
    <canvas id="canvas2" width=800 height=600></canvas>
    <canvas id="canvas3" width=800 height=600></canvas>
    <div class='buttonContainer'>
        <input class='but' id='but1' type='button' value='Button 1'>
        <input class='but' id='but2' type='button' value='Button 2'>
        <input class='but' id='but3' type='button' value='Button 3'>
        <input class='but' id='but4' type='button' value='Button 4'>
    </div>

</body>

</html>

CSS：

#canvas0,  #canvas1, #canvas2, #canvas3 {
    position: absolute;
    border: 2px solid;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

.buttonContainer{
   position: relative;
    top: 40%;
    left:45%;
    width:80px;
}
.class='but' {
    float:left;
}


#canvas0 {
    z-index: 0;
}

#canvas1 {
    z-index: 1;
}

#canvas2 {
    z-index: 2;
}

#canvas3 {
    z-index: 3;
}

JFIDDLE： http://jsfiddle.net/Th3JT/

以下是我的显示器上的分辨率为1080x1920：

Larger window

Smaller window

显然（在JFiddle中可以看到），按钮在数学上不是以不同的分辨率为中心。但是，要解决此问题，您只需要进行数学运算并使用媒体查询。如果您无法解决问题，请尝试一下并与我联系。你可以随时在Skype上打我一些语音帮助，我总是可以使用TeamViewer来帮助你。我真的希望我能解决你的大多数问题（当窗口改变时，按下按钮会停留在窗口的中央）。我认为它在数学上不以不同分辨率为中心的原因可能是由于使用position: absolute的画布。玩弄它，并遇到你遇到的任何问题，我会尽力帮助你。祝您的编程顺利，并且在编码时不要忘记您的咖啡因;）。

按钮以画布为中心

2 个答案: