垂直和水平居中大 div 中的小 div答案

【问题标题】：Center small div in big div vertically and horizontally垂直和水平居中大 div 中的小 div
【发布时间】：2013-01-11 15:20:42
【问题描述】：

我的代码如下：

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

【问题讨论】：

如果您不关心 IE7，只需将 display: table-cell 添加到您的 #bigDiv { :)

标签： javascript html css

【解决方案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/

【讨论】：

【解决方案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。

【讨论】：

创意解决方案！ - 但是在今天的时代，CSS 多了几行（几 Kb 真的没什么可下载的）。不要试图诋毁您以支持我的回答，因为我在很长一段时间内都不会想到这一点。再一次，很好的答案！

【解决方案3】：

应该是：

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

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

【讨论】：

【解决方案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;
    }

【讨论】：

【解决方案5】：

如果您需要在不知道框的确切大小（如果它们可能会改变）的情况下执行此操作，这是一种略显老套的方法：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 的解决方案会更简洁

【讨论】：

【解决方案6】：

将此添加到#smallDiv：

margin-top: 100px;

【讨论】：