显示表格和表格单元格忽略vertical-align中间属性

Question

我似乎无法理解为什么浏览器会忽略display:table和table-cell，vertical-align:middle属性。这对我来说似乎很直接，但我的结果与我告诉div使用CSS做的完全不同。以下是问题的快照：

如何让框显示在页面的正中间？

html,
body {
  margin: 0;
  padding: 0;
}
#container {
  width: 100%;
  display: table;
  height: 100%;
}
#wrapper {
  border: 1px solid rgb(112, 112, 112);
  display: table-cell;
  vertical-align: middle;
  background: red;
}

<div id="container">
  <div id="wrapper">box</div>
</div>

Answer 1

您需要将height:100%设置为html,body，否则#container将height:100%为html, body { margin: 0; padding: 0; height:100% } #container { width: 100%; display: table; height: 100%; } #wrapper { border: 1px solid rgb(112, 112, 112); display: table-cell; vertical-align: middle; background: red; }。

＆＃13;

＆＃13;

<div id="container">
  <div id="wrapper">box</div>
</div>

＆＃13;

{% load cache %}
{% load menu %}
{% cache 500 menu "unique-options" %}
    {% generate_menu %}
{% endcache %}

＆＃13;

＆＃13;

＆＃13;

编辑：这种情况发生在浏览器不仅在IE中