如何将两幅画布居中放置？答案

【问题标题】：How do I center two canvases on top of one another?如何将两幅画布居中放置？
【发布时间】：2013-06-27 16:54:00
【问题描述】：

我需要在另一个之上显示一个 HTML5 画布。我已经通过以下方式进行了管理：

<canvas id="lower" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="upper" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

但是，我似乎无法弄清楚如何将这两个画布居中，同时保持一个在另一个之上。有什么想法吗？

【问题讨论】：

标签： javascript css html canvas

【解决方案1】：

将它们放在带有样式的<div> 中：

div#canvasContainerId {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}

position: relative 导致<canvas>es 的absolute 定位相对于它们包含的<div>。
auto 边距以及固定的width 将<div> 居中。

【讨论】：

【解决方案2】：

用text-align:center和position:relative做一个外容器，用position:relative做一个内容器，把画布放在内容器里面，去掉两个画布上的left:0;top:0;，去掉下面的position:absolute的画布。并确保在 html 中，下部画布位于上部画布之前，就像您所做的那样。

#container {
  text-align:center;
  position:relative;
}

#inner_container{
  position:relative;
}
#upper {
  z-index: 1;
}
#lower {
  position:absolute; z-index: 0;
}

http://jsfiddle.net/NW6Fx/

编辑：我相信如果您这样做，则不需要 z-index 属性。顺序只是在 html 中哪个画布在前，哪个是 position:relative。

【讨论】：

【解决方案3】：

您可以在它们之间添加分隔线<br/>

或

可能会尝试为每个人提供以下 css：

{
    margin:auto;
    clear:both;
}

对于绝对定位，您应该使用顶部。例如，对于第一个，输入top: 50px。这会将第一个元素从顶部移出 50 像素。对于第二个，输入top: 100px。

【讨论】：

谢谢大家的帮助。由于多种原因，我最终只使用 jQuery 来计算屏幕的中心。然后，我也用它来调整画布的 CSS 属性，但我把位置保留为绝对。