6

我的代码如下：

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

4

6 回答 6

8

阅读：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/

于 2013-01-11T15:26:28.580 回答
3

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

于 2013-01-11T15:25:37.110 回答
0

应该：

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

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

于 2013-01-11T15:26:15.187 回答
0

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

  #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;
    }
于 2013-01-11T15:28:28.367 回答
0

将此添加到#smallDiv：

margin-top: 100px;
于 2013-01-11T15:30:11.377 回答
0

如果您需要在不知道框的确切大小的情况下进行操作（如果它们可能会更改），这是一种有点笨拙的方法：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 的解决方案会更干净

于 2013-01-11T15:30:41.777 回答