你如何在另一个 div 元素中相对于内容动态地将 div 居中？

Question

我目前正在尝试在另一个 div 内专门定位多个 div，而该 div 本身以另一个 div 为中心。

从视觉角度了解我正在尝试做的事情：

我有一个具有特定高度和宽度的父 div。该 div 元素内部应该是另一个居中的 div（白色边框）。同样，该 div 内部应该是一些特定定位（绿色）的 div。绿色 div 应由 javascript 函数创建和附加。

现在，当我将绿色 div 放入其中时，我希望居中 div 的高度和宽度动态变化。

我当前的代码是：

HTML：

<div id="grandparent">
    <div id="parent">
        <!-- <div class="child"></div> -->
        <!-- <div class="child"></div> -->
        <!-- <div class="child"></div> -->
        <!-- <div class="child"></div> --> (commented because they're not yet in there)
    </div>
</div>

CSS：

#grandparent{
    height: 130px;
    width: 145px;
    background-color: #000000;
    border: 3px solid #00ffff;
    display: table;
}

#parent{
    display: table-cell;
    vertical-align: middle;
}

.child{
    height: 23px;
    width: 23px;
    float: left;
}

javascript：

for(var i = 0; i < number; i++){
    var top = ...
    var left = ...
    var child = $("<div class='child'></div>");
    child.css("top", top);
    child.css("left", left);
    $("#parent").append(child)
}

到目前为止，我的内容基于本指南： http://www.vanseodesign.com/css/vertical-centering/

如何根据内容改变 div 的大小？ 如果您更改此内容，那么 div 会保持居中吗？

Answer 1

如果我知道你不需要任何 JS 来将 div 居中，只需使用 inline-block:

#parent{
  display: table-cell;
  vertical-align: middle;
  text-align:center; /*Add this*/
}

.child{
  height: 23px;
  width: 23px;
  /*float: left; Remove this*/
  display:inline-block; /*Add this*/
}

编辑

根据您的图片，您可能需要一个额外的 div：

 <div id="grandparent">
  <div id="parent">
   <div class="border">
     <div class="child"></div>
        ....

查看完整演示http://jsfiddle.net/R9YGb/10/