HTML5 将一个 div 居中在另一个 div 之上

【问题标题】：HTML5 centering a div on top of another divHTML5 将一个 div 居中在另一个 div 之上
【发布时间】：2013-11-30 02:37:36
【问题描述】：

我需要在图像 div 的顶部居中画布 div。我试过了

#topCanvas {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

还有左边距/右边距但没有成功。这是 JSFiddle - http://jsfiddle.net/yesprasoon/dSX7U/1

画布的宽度和高度将是恒定的，并且需要将水平/垂直中心与后面的 div 对齐。我们可以放心地假设画布大小将始终小于图像大小。

【问题讨论】：

标签： css html absolute center-align

【解决方案1】：

#topCanvas {
  background-image: url('http://www.deque.com/wbcntnt928/wp-content/dquploads/jquery_logo.png');
  height: 180px;   //according to the image
  width: 800px;   //according to the image
}

#countDown{
  position: absolute; 
  left: 50%;
  top: 50%;
  margin-left: -30px;
  margin-top: -30px;
}

<div id="topCanvas">
  <canvas id="countDown" width="60" height="60" ></canvas>
</div>

【讨论】：

谢谢！但我仍然无法解决。图像大小不是恒定的。如果您看到 jsFiddle - 图像会根据页面大小重新调整大小。