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

Question

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

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

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

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

Answer 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>