可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have 4 overlapping canvases (acting as layers) positioned absolutely and centered horizontally and vertically.

Over this canvas, I want to overlay four HTML/CSS buttons in a column in the center of the canvas (for a game menu). I'm new to CSS and HTML and I haven't been able to figure out how to get the buttons centered over the absolutely positioned canvas. How can I do that? Thank you.

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:

Here is a drawing of what I would like to know how to do. Buttons that stay centered on the center of the canvas, no matter how the browser is resized.

Second edit: If I settle for horizontal centering (instead of insisting on both vertical and horizontal centering), I can do it very nicely.

This article helped me very much: Absolute Positioning Inside Relative Positioning

Here is my final code, and a jsfiddle 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;
}

回答1:

Maybe something along the lines of this.

here is a jsfiddle for a demo

append this 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>

回答2:

I have fixed your issue, now that i am finally home from my day at Thorpe Park. Basically... i took @Morne nel's code and changed top: 250px; to top: 40%. I'm not sure if this is mathematically centered, but you can always do that yourself. Nonetheless, the buttons stay in the position relative to the canvas. Here is the code:

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/

Here is what it looks like on my monitor with a resolution of 1080x1920:

Obviously (as can be seen in JFiddle), the buttons are not mathematically centered on different resolutions. However, to fix this you just have to do the maths and use media queries. Give it a try and contact me in a while if you are unable to fix it. You can always hit me up on Skype for some voice help and I can always use TeamViewer to help you further. I really hope I fixed most of your issues (Atleast when the window changes, the buttons stay in the center of the window). I believe that the reason that it is not mathematically centered on different resolutions could be due to the canvases using position: absolute. Play around with it and hit me up with any problems that you encounter and I'll try to help you as best I can. Good luck with your programming, and don't forget your caffeine when coding ;).