Center vertically and horizontally and overlap divs in css - html

Question

I want to overlap two divs and then center them vertically and horizontally.
I am able to overlap the divs and center them vertically, BUT horizontal centering is not working.
In the css code, I have a class that I copied from some website and it functions to center any div (hope so!).
Here is the fiddle to it:
http://jsfiddle.net/o3c8768h/1/
HTML:
<div id="micWidgetContainer">
<div id="micWidgetCircle" class="centerme"></div>
<div id="micWidget" class="centerme">
</div>
</div>
CSS:
#micWidgetContainer {
width: auto;
height: 500px;
position: relative;
margin: 0 auto;
}
.centerme {
margin: 0 auto;
display: table;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#micWidgetCircle {
width: 200px;
height: 200px;
position: absolute;
display: block;
margin: 0 auto;
border-radius: 50%;
background: #D0CBCB;
}
#micWidget {
display: block;
width: 200px;
height: 100px;
position: absolute;
border-radius: 40%;
background: #EEE;
z-index: 10;
}

Answer 1

if you want to center vertically and horizontally a block you have to use the position:absolute property and the left, top, bottom and right statements.
i rewrited your .centerme class in order to make it works
.centerme {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
http://jsfiddle.net/o3c8768h/9/