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.

![enter image description here](https://i.stack.imgur.com/gdqlU.png)

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](http://css-tricks.com/absolute-positioning-inside-relative-positioning/)

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

```