Css 垂直居中几乎适用于所有浏览器，但不适用于IE7

这实际上是关于我的简单页面（有一天会被真正的内容取代）的两部分问题，HTML+CSS样板用于垂直居中和IE7

有人能详细解释一下为什么页面在非IE浏览器（Chrome、Fx、Opera）中正确显示，几乎所有的浏览器都是半新到新的IE（IE5.5、IE6、IE8、IE9），但在IE7中却没有

我特别感兴趣的是：它在IE6中工作，但在IE7中不工作，因为。。。一种解释

要使

div#c

在IE7中正确垂直居中，应更改哪些内容？
我正在为

div#c

使用特定高度，但使用的样板文件与高度无关，修复程序应保留此功能

破坏其他浏览器不是一个选项，除非它是IE5.5（好的，IE6也是，但只有在确实不可避免的情况下）

更改

并将IE转换为怪癖模式也是不被接受的（对于新开发的页面来说，这是一种非常糟糕的做法）

如果您没有IE7（就像我一样），您可以访问或粘贴URL，然后选择IE7自己查看问题

---

因为页面在接受一些答案后会改变，所以我提供了相关HTML和CSS部分的快照（logo URL更改为绝对）

html，正文{高度：100%；}
正文{背景色：#fff；颜色：#000；边距：0px；填充：0px；}
div{margin:0px；padding:0px；}
#外部{位置：相对；宽度：100%；高度：100%；溢出：可见；}
#外部[id]{显示：表；位置：静态；}
#中间{位置：绝对；顶部：50%；宽度：100%；文本对齐：中心；}/*仅适用于资源管理器*/
#中间[id]{显示：表格单元格；垂直对齐：中间；位置：静态；}
#c{位置：相对；顶部：-50%；}/*仅适用于浏览器*/
#{宽度：385px；高度：120px；左边距：自动；右边距：自动；}
#c{背景图像：url(http://engitize.net/engitize.png)；背景重复：不重复；背景位置：中间顶部；}
#c div{位置：相对；顶部：100px；宽度：100%；颜色：#666；字体大小：粗体；字体系列：衬线；字体大小：12px；文本对齐：右；}
#页脚{宽度：100%；文本对齐：居中；高度：15px；填充：5px 0；边距：-20px自动0自动；边框：0；背景色：#def；}
#页脚div{padding:0px 5px 0px 5px；文本对齐：右；字体大小：10px；字体系列：无衬线；}
a{文本装饰：无；颜色：#006；}
a:悬停{color:#00c；}
p{margin:0px；padding:0px；}
因为历史很重要！
普泽米斯·瓦夫·帕维·齐克的印记将于2012年面世

IE7，您正在使用它作为垂直定心技术的一部分

你的页面相对简单，所以我简化了很多HTML/CSS。现在，无论我在哪里测试，定心都能正常工作

---

完整代码：

导致此行为的行是

position: static

…在“中间”CSS规范中

如果禁用该行，IE7似乎会（或多或少）渲染页面中间的标识。

这是<代码> <代码> < /P> IE6和IE7在这方面有点古怪（不管怎样，这就是我读到的）

如果您执行以下操作，您将看到事情发生了——代码（无需编辑，只需保存几个边框即可查看发生了什么）

以下是我所做的：

删除您的

添加到您的DIV{}CSS行-

边框：1px灰色虚线

在“outer”、“middle”和“c”div处，a抛出了一个内联的

边框颜色

，以查看哪个是哪个

点击刷新

然后粘贴

，然后再次点击刷新。我觉得很好。垂直居中，水平居中

截至2011年4月20日，W3C将

声明为“非标准”。当然，IE6/7不知道这个标签是什么意思

您的Q#1已经、IE7和以下版本不支持CSS表属性，因此必须为它们找到另一种方法。他的绝对定位技术通常是实现这一点的首选方法，因为大多数情况下，在这样的场景中（启动页面？），中心内容的宽度和高度是已知的

上述注释的附录： 为了回答为什么它在IE6中工作而不是在IE7中工作，即使IE6也不支持表属性，IE7实际上从

中间[id]{

规则-IE7确实理解这种类型的选择器，因此这意味着后面的绝对/相对定位与IE6的工作原理不同

考虑到上述情况，重新制作CSS以确保IE7和IE6获得相同的CSS，并且后来将其放置在级联中以覆盖“良好”CSS。结果表明，定位方法也是高度不可知的，在注释中有各种链接来测试这一点，但这是最终的工作版本：

混合表单元/定位方法： <小提琴>包括图像的宽度和高度，但是如果去掉它们和定位“子文本”，它（或应该）表明中间的任何东西都保持中心为

。 使用的HTML与此答案的底部相同减去额外的

元素

CSS:

html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000;  }

#outer {
    position: relative;
    width: 100%;
    height: 100%;
    display: table;
}

#middle { 
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}

#c {
    width: 385px;
    height: 120px;
    margin: 0 auto;
    background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}

/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
  *position: absolute;
  *top: 50%;
  *width: 100%;
  *text-align: center;
  }

#c {
  *position: relative;
  *top: -50%;
}

/**** end IE7 and below rules ****/


#c div {
    position: relative;
    top: 100px;
    width: 100%;
    color: #666;
    font-weight: bold;
    font-family: serif;
    font-size: 12px;
    text-align: right;
}

#footer {
    width: 100%;
    text-align: center;
    height: 15px;
    padding: 5px 0 0 0;
    margin: -20px auto 0 auto;
    border: 0;
    background-color: #def;
}
#footer div {
    padding: 0px 5px 0px 5px;
    text-align: right; font-size: 10px;
    font-family: sans-serif;
}
#footer p {margin: 0;}

<div id="outer">
  <i></i>
  <div id="middle">
      <div id="c"><div>
        because history is important!
      </div></div>
  </div>
</div>

<div id="footer">
  <div>
   <p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
   <p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p>
  </div>
</div>

正如在使用HTML5样板文件用于有条件地对HTML元素进行分类的技术的注释中指出的，请参见：

意味着您可以用以下内容取代IE7黑客：

.ie6 #middle, .ie7 #middle {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}

.ie6 #c, .ie7 #c {
  position: relative;
  top: -50%;
}

---

原始替代方案-“火柴棒技术” 您可能会通过条件注释或hacks将以下技术与“表单元格”技术混合使用，但就我的测试所见，这种（hacky！）技术可以在浏览器中工作

正如你所要求的高度不可知的版本。。您可能喜欢也可能不喜欢“火柴棒”技术，这涉及到使用inlin

html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }

#outer { position: relative; width: 100%; height: 100%;}

/* a matchstick spacer */
#outer i {
 display: inline-block; 
 height: 100%; 
 width: 1px; 
 margin-left: -1px; /* to hide off page */
 margin-right: -4px; /* to remove spacing between this and #middle block */
 vertical-align: middle; /* will make inline block next to it center vertically */
 background: #f00; /* red, not required just to see or not see it */
 }

#middle { 
  display: inline-block;
  width: 100%;
  text-align: center;
  vertical-align: middle;
} 

/* image 385 * 120 */
#c { 
  display: inline-block;
  /* presuming image heights, but it wouldn't matter if there was width/height here or not */
  width: 385px; 
  height: 120px; 
  background: url(http://engitize.net/engitize.png) no-repeat 50% 50%; 
}

#middle, #c { /* IE hack for inline block on block level elements */
 *display: inline; 
}


#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }

#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } 
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }

a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }

<div id="outer">
  <i></i>
  <div id="middle">
      <div id="c"><div>
        because history is important!
      </div></div>
  </div>
</div>

<div id="footer">
  <div>
   <p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
   <p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p>
  </div>
</div>

<style>

    .vam{vertical-align:middle;}

</style>

<div style="line-height:200px; border:1px solid #000000; height:200px; 
text-align:center;color:#FFFFFF; font-size:1px;">

    .<img src="her-banner.jpg" alt="" class="vam" />

</div>