在大的 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/

- user974896

---

如果您不考虑IE7，只需在 #bigDiv { 中添加 display: table-cell 就可以了 :) - Morpheus

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/

- tsujp

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。

- jonathan.cone

---

创意解决方案！- 但在今天的时代，多写几行CSS（几KB的下载量真的微不足道）。我并不是想贬低你的答案，因为我很长时间以来都没有想到过这个。再次感谢你的好答案！ - tsujp

Answer 3

应该是：

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

这应该就差不多了，但我相信有人会想出更好的方法。显然，你也可以使用像素，所以top:100px;left:100px;在你的情况下可能更好 :)

- bashleigh

Answer 4

尝试使用绝对定位。您只需要知道元素的宽度，就可以将其放置在中心位置。

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

- Панайот Толев

Answer 5

将此代码添加到 #smallDiv 中：

margin-top: 100px;

- TheGoodGuy

Answer 6

如果您需要在不知道盒子的确切大小（如果它们可能会改变）的情况下执行此操作，则可以使用以下略微hacky的方法：http://jsfiddle.net/gXbqm/

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

如果您知道这些 div 始终是 100x100 和 300x300，Jonathan.cone 的解决方案更加简洁。

- Ben McCormick