javascript – 纵向和横向中央div中的小div

我的代码如下：

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

我的CSS如下：

#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内.水平工作,但垂直没有.

http://jsfiddle.net/4Gjxk/

解决方法

我相信这是最简单的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%;
}

这是updated jsFiddle.