Question

我试图将一个div垂直居中于另一个div中，而不管两个div的大小

我这样做：

<div id='outer_div'>
    <div id='inner_div'></div>
</div>

CSS：

#outer_div {
   display: table-row; 
   height: 200px; 
   width: 200px
}

#inner_div {
   display: table-cell; 
   vertical-align: middle;
   height: 500px; 
   width: 500px
}

我故意为内部div添加更大的尺寸。发生的情况是，即使我放宽1000px，inner_div的宽度也会因200px的宽度而在outer_div处获得（这就是我的要）。

但是对于高度来说，它没有天花板，我希望它能够被天花板高高地隔开。

我想要的是inner_div保持与outer_div相同的大小，无论我在CSS中给outer_div的高度。 我基本上希望它与其父级的大小相同。

编辑：

我只把文字放在那些div中。所以假设我的外部div为200px*200px（它有display: table-row），内部div由CSS定义为500px*500px，内部有虚拟文本。我的预期结果是将内部div缩小到200px*200px。它被外部div成功地“收缩”为宽度，但不是高度。我想要的是让它在高度上缩小（所以如果我改变外部div的高度，内部div会自动调整）

我该怎么做？

Answer 1

这会为你做吗？但不知道你的局限性。

HTML：

<div id="container">
  <div id='outer_div'>
      <div id='inner_div'></div>
  </div>
</div>

CSS：

#container
{
   display: block;
   height: 200px;
   width: 200px;
   /* overflow: scroll; */
   overflow: hidden;
   background-color: green;
}

#outer_div {
   display: table-row; 
   height: 200px;
   width: 200px;
   background-color: purple;
}

#inner_div {
   display: table-cell; 
   height: 500px;
   width: 500px;
   background-color: yellow;
}

View in JSBin

修改：我不知道您是否可以更改#inner_div，但如果您这样做 - 那么只需删除其规则中的height ...

Answer 2

只需将max-height: value添加到内部div的CSS中，该CSS对应于外部div的高度，以便内部div的高度为“ceiled”。

调整具有“display：table-cell”属性的div的高度

2 个答案: