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

Question

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

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

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

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

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

PS。我可以仅向.item div及其中的所有内容添加css属性。

Answer 1

试试这个：

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

<强> jsFiddle example

为了在IE7中工作，需要JavaScript破解：

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

只需用适当的类替换.table*类。