Css 仅使用2个div进行垂直对齐

我有一个容器div和一个内容div。 标记：

我想垂直对齐content div，但不想让它占据容器div的整个高度。 现在我看到了其他解决方案，使用3个div的解决方案-外部、中间、内部-我不想这样做-只有2个div。

---

虽然上面的操作有效，但内容div的高度被忽略了，这可能是因为表格单元格显示值，它填充了整个容器div。如何纠正此问题？？？

从#内容id css选择器中删除显示：表格单元格css，然后200高度被考虑。你的身高有一个输入错误：200px宽度：200px没有分号来分隔这两个值，所以宽度没有被应用

#容器{
显示：表格；
边框：纯红2px；
宽度：400px；
高度：500px；
背景色：#aaa；
}
#内容{
/*显示：表格单元格*/
高度：200px；
宽度：200px；
垂直对齐：中间对齐；
背景色：#444
}

一些

高度可变的内容
。

您有什么问题？您的标记无效，第一个div没有结束标记。您到底有什么问题？现在就有问题了。您想垂直对齐什么？文本？潜水艇？在您的示例中，您没有任何东西可以垂直对齐。请更正css中的打字错误。如果我删除display:table单元格，content div将不会与container div垂直对齐。本例使用3个div，我只想使用2个div

<div id="container">
<div id="content">
   <pre>
      some <br/>
      content <br/> of variable height.
   </pre>
</div>
</div>

#container {display:table; border:solid red 2px; width:400px; height:500px; background-color:#aaa;}

#content {display:table-cell; height:200px; width:200px; vertical-align:middle; background-color:#444}