html - 垂直和水平居中并在css中重叠div

Question

我想重叠两个 div，然后将它们垂直和水平居中。

我能够重叠 div 并将它们垂直居中，但水平居中不起作用。

在 css 代码中，我有一个从某个网站复制的类，它可以将任何 div 居中(希望如此!)。

这是它的 fiddle :
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

如果你想垂直和水平居中一个块，你必须使用 position:absolute 属性和 left、top、bottom 和 right 语句。

我重写了你的 .centerme 类以使其工作

.centerme {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

http://jsfiddle.net/o3c8768h/9/