Center vertically and horizontally and overlap divs in css

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/