HTML5 Canvas显示问题当它在div容器中时

Question

以下是我的演示http://jsfiddle.net/9D4L4/2/

我正在使用canvas元素作为图片。

DIV包含canvas元素的Line-height.未取<h1>Normal Image </h1> <div> <img src="http://jeevanmukti.info/images/key.gif" /> </div> <br><br><br> <h1>When i use canvas </h1> <div> <canvas >1111</canvas> </div> 我想将canvas元素verticaly设为div的中心。请帮帮我

HTML

div{background:grey; width:100px; height:100px; text-align:center; line-height:100px; }
img{max-width:100%; max-height:100%}
canvas{background:url('http://jeevanmukti.info/images/key.gif') no-repeat center center; padding:0; margin:0; max-width:100%; max-height:100%}

CSS

{{1}}

我希望整个画布（红色）成为该DIV的垂直中心

Answer 1

添加

canvas{vertical-align: middle;} 

Answer 2

更新代码中的css属性：

     div{margin:0 auto;}

Answer 3

给画布高度为100px就可以了，所以画布将填充父DIV的高度