javascript - 垂直和水平居中大div中的小div

Question

我的代码如下:

<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/

Answer 1

阅读:http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

如果您懒得阅读，请执行以下操作:

    #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;

}

这是更新后的 jsfiddle: http://jsfiddle.net/4Gjxk/1/