HTML5 centering a div on top of another div

Question

I need to center a canvas div on top of an image div. I tried with

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

and also with left/right-margin but did not succeed. Here is the JSFiddle - http://jsfiddle.net/yesprasoon/dSX7U/1

Canvas width and height will be constant and it needs to align horizontal/vertical centre with the back div. We can safely assume that canvas size will always remain less than the image size.

score 0 · Answer 1 · edited May 29 '20 at 05:08

0

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

edited May 29 '20 at 05:08

4LPH4

308
1
3
16

answered Nov 16 '13 at 19:50

Ihsahs

892
9
23

Thanks! But still I could not work it out. Image size is not constant. If you see the jsFiddle - image gets re-sized based on page size. – Prasoon Nov 17 '13 at 17:08

HTML5 centering a div on top of another div

1 Answers1