我有 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;
}
Edit:
这是我想知道如何做的图。无论浏览器如何调整大小，按钮都保持在画布中央。
第二次编辑：
如果我选择水平居中（而不是坚持垂直和水平居中），我可以做得很好。
这篇文章对我帮助很大：相对定位内的绝对定位 http://css-tricks.com/absolute-positioning-inside-relative-positioning/
这是我的最终代码和jsfiddle http://jsfiddle.net/FV2NL/ demo.
<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;
}
