在垂直和水平的大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/

Answer 2

我相信这是使用最少 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%;
}

这是更新后的 jsFiddle。