Html div填充父级和中心子级

使用非常简单的标记，我需要：

• 扩展div以填充其父级高度
• 将该元素的子元素垂直居中

因此，

#包装器

必须具有所有可能的高度，将页脚推到

#容器

的底部。里边的跳水队员必须站在一边，所以只有他们的位置才会改变。（基本上只有元素的位置会发生变化，而不是它们的大小）

此外，我需要与ie8兼容（因此没有flexbox）

唯一存在的固定大小是

#容器

中的一个

以下是片段：

/*位置*/
/*有什么想法吗*/
/*固定尺寸*/
#容器{高度：300px；}
/*显示目的*/
* {
边框：1px黑色实心；
保证金：2倍；
颜色：#fff；
}
#容器{背景色：#999；}
#标题，#包装{背景颜色：#666；}
#页脚，#列表{背景色：#444；}
#列表分区{背景色：#222；}

标题
div
div
div
页脚

分叉

不确定这是否是你想要的

编辑对不起

/* position */
#wrapper { height: 91%; }
#list { height: 90%; }
#list div { margin-bottom: 9.9%; }

这使用了百分比，我不确定ie8是否支持这个百分比，也不确定您所说的“内部div必须保持其侧面”，因此我假设您希望

#list div

s的高度保持不变

如果这不是你的情况，那就跟我走

#list div { height: 31.5%; }

EDT 2 这是另一次尝试

试试1

这不是一个完全自动化的尝试，因此您必须更改填充或高度，以防它们不同

尝试2：使用多个表

---

简短的回答，但由于我添加了太多的内容，例如重新修改布局（添加一层div用于嵌套表）和大量的

display:table

s，因此布局有点破损（以至于边距不均匀）。这是我能做的最多的了。

这是一个带有更多标记的答案，多亏了@logo，这是一个具有所需效果的代码笔：

---

再次感谢

不太清楚，我不够清楚，我更新了我的问题。谢谢你！更新。这就是你现在想要的吗？那样的话，恐怕我帮不了你了。只有3种方法可以做到这一点，1是每次手动计算宽度，2是使用Javascript自动执行过程，3是停止对ie8s的黑客攻击。添加了一些希望能有所帮助的内容。它不是像您希望的那样对齐，但它可以灵活地工作

#list div { height: 31.5%; }

/* position */
#container *, #wrapper * { max-height: 90.5%; }
#list { padding:9.6% 0; }

/* position */

#header { display:table-header-group; }
#footer { display:table-footer-group; }
#wrapper2 { height:100%; }
#wrapper, #list { display:table-cell; }
#container, #wrapper2 { display:table; width: 100%;}
#list { vertical-align: middle; }