Question

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

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

在css代码中，我有一个我从某个网站复制的类，它的功能是居中任何div（希望如此！）。

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/

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

1 个答案: