3つのjsキャンバスを中央に配置するにはどうすればいいですか？

私は3つのjsキャンバスにこの本当に奇妙な（おそらく意図した？）バグを持っています。完全なページを埋めるのではなく、div内にキャンバスを配置したいと思っています。3つのjsキャンバスを中央に配置するにはどうすればいいですか？

以下のコードでわかるように、キャンバスはdiv内にあります。私はここで狂っていないことを確認するためにいくつかのテスト見出しを追加しましたが、キャンバスはdivの外に移動するようですが、これを修正する方法はわかりません。

<head> 
    <meta charset=utf-8> 
    <title>My first three.js app</title> 
    <style> 
     body { margin: 0; } 
     #test { 
      width: 100px; 
      height:100px; 
      margin: 0px auto; 
      border: 1px solid red; 
     } 
    </style> 
    <style type="text/css" src="css/main.css"></style> 
</head> 
<body> 
    <div id="test"> 
     <h1>test1</h1> 
     <canvas id="canvasID"></canvas> 
     <h2>test2</h2> 
    </div> 
    <script src="https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js"></script> 
    <script src="three.js-master/build/three.js"></script> 
    <script> 
     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
     var canvas = document.getElementById("canvasID"); 
     var renderer = new THREE.WebGLRenderer({ canvas: canvas }); 

     renderer.setSize(window.innerWidth*0.9, window.innerHeight*0.9); 
     document.body.appendChild(renderer.domElement); 

     var geometry = new THREE.BoxGeometry(1, 1, 1); 
     var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
     var cube = new THREE.Mesh(geometry, material); 
     scene.add(cube); 

     camera.position.z = 5; 
     function render() { 
      requestAnimationFrame(render); 
      cube.rotation.x += 0.01; 
      cube.rotation.y += 0.01; 
      renderer.render(scene, camera); 
     } 
     render(); 

     if (Detector.webgl) { 
      init(); 
      animate(); 
     } else { 
      var warning = Detector.getWebGLErrorMessage(); 
      document.getElementById('container').appendChild(warning); 
     } 
    </script> 
</body>