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

这是updated jsFiddle。

Answer 3

应该是：

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

这应该是正确的，但我相信有人会想出一个更好的方法。显然你也可以做像素，所以top:100px;left:100px;在你的情况下也可以更好地工作：）。

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;

Answer 6

如果您需要在不知道盒子的确切大小的情况下进行操作（如果它们可能会发生变化），这是一种稍微过分的方法：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的解决方案更清洁

在垂直和水平的大div中居中小div

6 个答案: