Javascript 在垂直和水平方向将小刻度置于大刻度的中心

我的代码如下：

<div id="bigDiv">
  <div id="smallDiv">DD</div>
</div>

#bigDiv {
  border: 1px solid red;
  height: 300px;
  width: 300px;
  vertical-align: middle;

}

#smallDiv {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 0 auto;
}

我想在大div内垂直和水平地将小div居中。水平方向可以，但垂直方向不行

---

我相信这是最直接的解决方案，CSS数量最少。由于100/300=~.33，您可以使用33%的保证金，如下所示：

#bigDiv {
  border: 1px solid red;
  height: 300px;
  width: 300px;
}

#smallDiv {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 33%;
}

以下是。

应该是：

#smallDiv{
    position:absolute;//? relative?
    top:45%;
    left:45%;
}

这应该是正确的，但我相信有人会想出一个更好的方法。显然你也可以这样做

top:100px；左：100px在您的情况下可能也会更好：）。
阅读以下内容：

如果您不介意阅读，请执行以下操作：

    #bigDiv {

      position: relative; /* Needed for position: absolute to be related to this element and not body */

      border: 1px solid red;
      height: 300px;
      width: 300px;
      vertical-align: middle;
    }

并将另一个更改为：

#smallDiv {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  border: 1px solid black;
  height: 100px;
  width: 100px;

}

这里是更新的JSFIDLE:
尝试绝对定位。你只需要知道元素的宽度就可以把它放在正中

  #bigDiv {
    border: 1px solid red;
    height: 300px;
    position: relative;
    vertical-align: middle;
    width: 300px;
}

  #smallDiv {
        border: 1px solid black;
        height: 100px;
        left: 50%;
        margin: -50px auto 0 -50px;
        position: absolute;
        top: 50%;
        width: 100px;
    }

将此添加到#smallDiv：

margin-top: 100px;

如果您需要在不知道箱子的确切尺寸的情况下进行操作（如果它们可能会改变），这是一种稍微有点老套的方法：

如果你知道那些div永远是100x100和300x300，Jonathan.cone的解决方案更干净
如果你不关心IE7，只需将
display:table cell
添加到你的
#bigdivi{
：）创造性解决方案中！-但在当今时代，更多的CSS行（几Kb真的没什么可下载的）.我不会因为我的回答而诋毁你，因为我在很长一段时间内都不会想到这一点。再一次，回答得很好！
#bigDiv {
  border: 1px solid red;
  height: 300px;
  width: 300px;
  vertical-align: middle;
  display:table-cell

}

#smallDiv {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  vertical-align:center;
}