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

Question

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

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

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

基本上从那个例子来看，带有蓝色边框的 div 应该在绿色 div 内垂直居中。但我做不到。

有人知道怎么做吗？

附言。我可以仅将 css 属性添加到 .item div 及其中的所有内容。

Answer 1

试试这个:

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

jsFiddle example

为了在 IE7 中工作，JavaScript hack 是必要的:

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

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