Centering translated div inside div (css logo) - html

Question

I'm experimenting with a logo in css. I build this with different div's.
The logo contains two parts, the right and the left part. Each part contains two div's with the 2d- front material and one with the 3d extrusion parts. These last two are each split up into an upper and a lower div.
I made the logo bigger than it is supposed to so I translated the outer div to the correct size. I wasn't able to set the measurements of that outer div to automatically wrap the translated div container, so I did this manually.
I want to add this css logo into a horizontal navigation list, one of the item's needs to contain this logo.
I'm breaking my head on how to align this div in the center of my list item. I searched for it but I can't seem to find a descent solution. Can someone put me in the right direction ? It would be much appreciated !
---> I gave the div main-nav-logo tbe same size as my list item, now I want to accomplish that I get the logo div in the center of the main-nav-logo div ...
.main-nav-logo {
position: relative;
width: 200px;
/* for testing purpose */
height: 144px;
/* for testing purpose */
text-align: center;
/* for testing purpose */
margin-left: auto;
/* for testing purpose */
margin-right: auto;
/* for testing purpose */
float: left;
/* for testing purpose */
overflow: auto;
/* for testing purpose */
padding: 0px;
display: table;
/* for testing purpose */
clear: both;
/* for testing purpose */
}
.logo {
position: relative;
top: -110px;
width: 300px;
height: 300px;
display: block;
margin-left: auto;
/* for testing purpose */
margin-right: auto;
/* for testing purpose */
-moz-transform: scale(0.351);
-webkit-transform: scale(0.351);
-o-transform: scale(0.351);
-ms-transform: scale(0.351);
transform: scale(0.351);
}
.left-cap {
position: relative;
height: 100%;
width: 100%;
left: 0;
}
.right-cap {
position: relative;
height: 100%;
width: 100%;
top: -100%;
left: 0;
}
.left-cap-front {
position: relative;
height: 100%;
width: 100%;
z-index: 3;
display: inline-block;
}
.left-cap-extrusion {
position: relative;
height: 100%;
width: 100%;
top: -102%;
z-index: 2;
}
.right-cap-front {
position: relative;
height: 100%;
width: 100%;
z-index: 3;
}
.right-cap-extrusion {
position: relative;
height: 100%;
width: 100%;
top: -100%;
z-index: 2;
}
.left-cap-front-upper {
position: absolute;
}
.left-cap-front-lower {
position: absolute;
}
.left-cap-extrusion-upper {
position: absolute;
}
.left-cap-extrusion-lower {
position: absolute;
}
.right-cap-front-upper {
position: absolute;
}
.right-cap-front-lower {
position: absolute;
}
.right-cap-extrusion-upper {
position: relative;
}
.right-cap-extrusion-lower {
position: relative;
}
<div class="main-nav-logo">
<div class="logo">
<div class="left-cap">
<div class="left-cap-front">
<div class="left-cap-front-upper">
</div>
<div class="left-cap-front-lower">
</div>
</div>
<div class="left-cap-extrusion">
<div class="left-cap-extrusion-upper">
</div>
<div class="left-cap-extrusion-lower">
</div>
</div>
</div>
<div class="right-cap">
<div class="right-cap-front">
<div class="right-cap-front-upper">
</div>
<div class="right-cap-front-lower">
</div>
</div>
<div class="right-cap-extrusion">
<div class="right-cap-extrusion-upper">
</div>
<div class="right-cap-extrusion-lower">
</div>
</div>
</div>
</div>
</div>
Hoping for some insight ... (Also if it means that I will have to rewrite the whole thing)
Thanks in advance !
A screenshot from the above code in JSFiddle gives me :
logo