我该如何将这个动态创建的3D对象居中对齐呢？

Question

Here is the fiddle.下面是截图：

很明显从截图，但更当你开始运用一些旋转。理想情况下，我甚至不必为容器指定高度或宽度。

我该如何做到这一点？

这里是重要的代码：

function RotaMenu (el) { 
    this.element = el; 
    this.rotationX = 0; 
    this.rotationY = 0; 
    this.panelCount = 0; 
    this.menuHeight = 0; 
    this.theta = 0; 
    this.radius = 0; 
} 

RotaMenu.prototype.update = function() { 
    this.panelCount = this.element.children().length; 
    this.menuHeight = $(this.element).outerHeight(); 
    this.panelSize = $(this.element).children().first().outerHeight(); 
    this.theta = 360/this.panelCount; 
    if ($('input[name=whichSize]:checked').val() == 'p') { 
     this.radius = Math.round((this.panelSize/2)/Math.tan(Math.PI/this.panelCount)); 
    } else { 
     this.radius = Math.round((this.menuHeight/2)/Math.tan(Math.PI/this.panelCount)); 
    } 
    var m = this; 
    $(this.element).children().each(function(i) { 
     var angle = m.theta * i; 
     $(this).css('transform','rotateX(' + angle + 'deg) translateZ(' + m.radius + 'px)'); 
    }); 
    $(this.element).css('transform','translateZ(' + this.radius + 'px) ' + 'rotateX(' + this.rotationX + 'deg) rotateY(' + this.rotationY + 'deg)'); 
    $('#labelc').text('Panels: ' + this.panelCount); 
}; 

和相关的CSS：

.menu-container { 
    position: absolute; 
    perspective: 1000px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 200px; 
    height: 100px; 
    left: 50%; 
    margin-left: -100px; 
    top: 50%; 
    margin-top: -150px; 
} 
.menu { 
    transform-style: preserve-3d; 
    position: absolute; 
    transition: .1s; 
    width: 100%; 
    height: 100%; 
    transform-origin: 50%; 
    background-color: rgba(0,0,0,.15); 
} 
.menu div { 
    border: 1px solid green; 
    padding: 10px; 
    position: absolute; 
} 

Answer 1

你可以尝试添加这些属性。菜单DIV：

顶部：50％; 剩余：50％; transform：translate（-50％，-50％）;

由于您拥有复杂的位置结构，请务必测试兼容性问题。