Javascript 多画布层定位HTML5

我有两个画布层，它们位于彼此的顶部

但是，我需要相对于页面定位它们

层的宽度为800，高度为300

我想有它的中心，无论它是什么大小的屏幕上，并有高度调整为每个大小的屏幕也

目前我正在使用：

<div>
    <canvas id="canvas" width="800" height="300"  style="position: absolute; left:20%; top: 40%; z-index: 0;"></canvas>
    <canvas id="canvasAnimation" width="800" height="300"  style="position: absolute; left: 20%; top: 40%; z-index: 0;"></canvas>
</div>

并使用大量的

来腾出空间放置它

---

我也在使用jQuery。如果有帮助的话，我知道如何获得屏幕的宽度。

您可以使用以下代码设置容器的宽度，其余部分将自动设置：

<div id="container" style="float:left; width:100px; height:200px;">
   <div style="position:relative; border:1px solid black; width:100%; height:100%">
     <canvas id="canvas" style="position: absolute; left:10%; top: 40%; z-index: 0;border:1px     solid #000000;background-color:red;width:80%; height:30%">CANVAS 1</canvas>
     <canvas id="canvasAnimation" style="position: absolute; left: 5%; top: 40%; z-index: -1;border:1px solid #000000;background-color:green;width:90%; height:30%">CANVAS 2    </canvas>
   </div>
</div>

画布1
画布2

Nikhil Doomra给出的答案很接近

如果只将以下样式代码添加到容器中，它将始终位于页面中心（如果页面比对象宽）：

因此，代码将产生以下结果：

<div id="container" style="margin-left: auto; margin-right: auto; width:100px; height:200px;">
  <div style="position:relative; border:1px solid black; width:100%; height:100%">
    <canvas id="canvas" style="position: absolute; left:10%; top: 40%; z-index: 0;border:1px     solid #000000;background-color:red;width:80%; height:30%">
      CANVAS 1
    </canvas>
    <canvas id="canvasAnimation" style="position: absolute; left: 5%; top: 40%; z-index: -1;border:1px solid #000000;background-color:green;width:90%; height:30%">
      CANVAS 2
    </canvas>
  </div>
</div>

画布1
画布2

不适用于我，只要将容器的高度和宽度设置为80%和30%，即使在调整大小后，也可以将其变小。它会根据页面的宽度和高度自动调整。

<div id="container" style="margin-left: auto; margin-right: auto; width:100px; height:200px;">
  <div style="position:relative; border:1px solid black; width:100%; height:100%">
    <canvas id="canvas" style="position: absolute; left:10%; top: 40%; z-index: 0;border:1px     solid #000000;background-color:red;width:80%; height:30%">
      CANVAS 1
    </canvas>
    <canvas id="canvasAnimation" style="position: absolute; left: 5%; top: 40%; z-index: -1;border:1px solid #000000;background-color:green;width:90%; height:30%">
      CANVAS 2
    </canvas>
  </div>
</div>