How Can I Center This Dynamically Created 3d Object On It's Parent?

Here is the fiddle. Here is a screenshot: It's obvious from the screenshot, but even more when you start applying some rotation. Ideally I wouldn't even have to specify a height

Solution 1:

You could try to add these attributes to .menu div:

top: 50%; left: 50%; transform: translate(-50%, -50%);

Because of the complex position structure that you have, make sure to test compatibility issues.