html - 垂直对齐 div，外部 div 不增长

Question

我有几个嵌套的divs，我需要将其中一个嵌套垂直居中divs。通常我会通过给外部div的 css 属性position: relative和内部div的属性来做到这一点position: absolute。然后我可以轻松地使用top和left定位div.

但我无法用我目前的结构完成它。这是一个例子：

http://jsfiddle.net/Epmd4/2/

所以基本上从那个例子来看，带有蓝色边框的 div 应该在绿色 div 内垂直居中。但我无法完成它。

任何人都知道如何做到这一点？

PS。我只能将 css 属性添加到.itemdiv 和其中的所有内容。

Answer 1

试试这个：

.item {
    /*position: relative;*/
    background: #00FF66;
    min-height: 60px;
    display:table-cell;
    vertical-align:middle;
}

jsFiddle 示例

要使其在 IE7 中工作，需要 JavaScript hack：

$(document).ready(function(){
  if($.browser.msie && $.browser.version == 7) {
      $(".tablecell").wrap("<td />");
      $(".tablerow").wrap("<tr />");
      $(".table").wrapInner("<table />");
  }
});

只需将.table*类替换为适当的类即可。