Three.js - 将两个按钮居中到父 div 的子 div 中

Question

我正在使用 dat.gui.js 来使用 Three.js 的参数菜单。我想把这个菜单放在主窗口的右上角。此外，我想在此菜单底部添加 2 个按钮，它们必须水平居中并相对于父 div。

这是 jsfiddle 的示例：example

如您所见，在 HTML 中，我对 child 和 parent div 具有以下结构：

<div id="webgl">
<div id="global-ui">
 <div id="gui">
 </div>
 <div id="buttons">       
         <button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start Animation</button>
         <button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button>
 </div>
 </div>
</div>

使用 CSS 用于#gui：

gui.domElement.id = 'gui';

对应于：

#global-ui {position: relative;}
#gui {position: absolute; top: 0; right: 0;}
#buttons {position: absolute; top: 200px;}

#global-ui div代表的父DIV#gui div和#buttons div。

使用这个 css，我得到以下图像：

我想得到这个：

正如您在第一张图片中看到的，有两个问题：首先，即使使用 CSS "，DAT.GUI 也没有严格位于右侧和顶部#gui {position: absolute; top: 0; right: 0;}"。似乎右侧有一个边距。

第二个问题，两个按钮相对于 DAT.GUI 没有居中，我尝试使用“ margin: 0 auto;”或“ text-align: center;”但没有成功。我想将它相对于#guidiv 容器并以自动方式居中。

任何人都可以帮助我解决这两个问题吗？如果您有解决方案，可以修改我的 jsfiddle.js 吗？

问候