0

How can I center canvas in body (horizontal and vertical)? I would like to center this: http://invisiblelabs.net/ex4.html

user2696392
  • 97
  • 1
  • 2
  • 12
  • possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) – André Dion Aug 19 '13 at 13:18

1 Answers1

0

Add this within the head tag: 

<style type="text/css">
#box {
height:400px;
width:200px;
background:#FFF;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -250px;
}

.thecanvas {
height:200px;
width:100px;
background:#FFF;
position:absolute;
}
</style>

And replace this with your current canvas element: 

<div id="box">
<canvas id="thecanvas" width="400" height="200">
    Your browser does not support the HTML5 canvas element.
</canvas>
</div>

I works for me, I hope it also does for you.

jediah
  • 102
  • 1
  • 8
  • Thanks for answering but it works partially - http://invisiblelabs.net/partiallyworks.html – user2696392 Aug 20 '13 at 13:49
  • @user2696392 What is working "partially" for you? Which browser are you using? And please use @ jediah when you comment, so i get noticed directly. – jediah Aug 20 '13 at 17:28
  • @user2696392 I tested it in Firefox, Chrome, Safari, Opera and different versions of Internet Explorer. All the same result. – jediah Aug 20 '13 at 17:53
  • The problem is that it is not fully centered, take a look here: http://gyazo.com/290a72acfcc2eb5b135ed5acd367d535.png , tested in Firefox and Chrome. – user2696392 Aug 20 '13 at 19:47
  • @user2696392 Well, then you need to adjust the values in css. I'll only gave an example on how to do it. – jediah Aug 21 '13 at 14:00
  • @user2696392 I hope you consider my answer as useful. – jediah Aug 21 '13 at 21:14