css - 调整具有属性 "display: table-cell"的 div 的高度

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的宽度(这就是我想要的)。

但是对于高度，它没有被限制，我希望它被限制到外部 div 的高度。

我要的是inner_div保持与 outer_div 相同的大小, 不管我给outer_div 什么高度在 CSS 中。 我基本上希望它与其父级大小相同。

---

编辑:

我只将文本放在那些 div 中。所以假设我有一个 200px*200px 的外部 div (它有 display: table-row )，内部 div 由 CSS 定义为 500px*500px它里面有虚拟文本。我的预期结果是将内部 div 缩小到 200px*200px .它被外部 div 成功地“缩小”了宽度，但没有缩小高度。我想要的是让它的高度也缩小(所以内部 div 会自动调整以防我改变外部 div 的高度)

我该怎么做？

Answer 1

只需将 max-height: value 添加到内部 div 的 CSS 中，它对应于外部 div 的高度，这样内部 div 的高度就会“天花板”。