在父 div 中居中三个.js renderer.domElement（画布）答案

【问题标题】：Centering three.js renderer.domElement (canvas) inside a parent div在父 div 中居中三个.js renderer.domElement（画布）
【发布时间】：2015-09-04 07:25:48
【问题描述】：

我很难理解如何在 html div 中“设置”threejs 渲染器的输出。

例如这里是一个简单的场景：

jsFiddle

html:

<div id="myPlanet"></div>

css：

body {
background : #000;
padding : 50px;
margin : 0;
}
#myPlanet {
width : 400px;
min-height: 400px;
margin : auto;
}

和js的摘录：

// The WIDTH of the scene to render
var __WIDTH__  = 400,

// The HEIGHT ot the scene to render
__HEIGHT__ = 400,
// We need to define the size of the renderer
renderer.setSize(__WIDTH__, __HEIGHT__);

// Let's attach our rendering zone to our page
document.getElementById("myPlanet").appendChild(renderer.domElement);

如果元素宽度（在 css 中）与渲染器宽度完全匹配，则输出在结果页面中完全居中。但是当 div 'myplanet' 扩展（宽度）超过渲染器的 400 像素时（即，将 css 规则更改为 600 像素宽度或 100%），jsthree 输出就会位于元素的左侧。

这怎么能居中？在 css 中，您必须创建一个特殊的规则案例（例如#myplanet img 或其他东西），然后您可以对其进行样式设置吗？我试过把'margin：0 auto;'在 myplanet 规则中，但它仍然不会使输出居中

【问题讨论】：

标签： css three.js

【解决方案1】：

<canvas> 元素默认被视为内联对象，类似于<img> 元素。这使得使用float:left; 或float:right; 属性混合文本和图像成为可能。我在父 div 中添加了一些文本和透明的红色背景，以展示这种行为。

在这种情况下，您有两个选择。

1) 为画布元素设置margin: auto 还要指定画布应被浏览器的页面渲染引擎视为块元素。

#canvas{
    display: block;
    margin: 0 auto;
}

你明白了：

2)为父div设置text-align: center

您可以选择指定内联元素的垂直对齐属性。

#myPlanet{
    text-align: center;
   /* vertical-align: middle; */
}

我强烈推荐第一个选项。

【讨论】：

太棒了 - 谢谢阿德里安。画布元素效果很好。