html - 在容器 div 中垂直对齐表格

Question

我正在尝试在父 div 中对齐动态大小的表。父容器的高度已设置，内表的高度未知（可变）。我不认为边距/相对定位调整会起作用，因为表格的大小是未知的。这可以做到吗？现在代码看起来像：

html:

<div id="wrapper">
 <div id="board">
      <table id="evolve">...</table>
 </div> 
</div>

CSS：

#wrapper {
    width: 100%; 
    height: 100%; 
}
#board {
    position: relative;
    margin: auto; 
    width: 265px; 
    height: 222px; 
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}
.evolve {
    border: 1px black solid;
    margin: auto;
    position: relative;
}

Answer 1

你想要的css代码

#board {
    display:table-cell;
    width: 265px; 
    height: 222px; 
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}
.evolve {
    border:solid 1px black;
        }

更新 您将需要根据包装器宽度更改填充左（如果将其设置为 100% 则它将起作用）

#wrapper {
    height: 100%;
    padding-left:36%;
}
#board {
    display:table-cell;
    width: 265px; 
    height: 222px; 
    vertical-align: middle;
    border: 1px solid black;
}
.evolve {
    border: 1px black solid;
   }

一旦我找到更好的解决方案，我会更新它

Answer 2

您可以定义line-height与 的 相同height的DIV。像这样写：

#board {
    position: relative;
    margin: auto;
    width: 265px;
    height: 222px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    line-height:222px;
}
#board .evolve {
    border: 1px black solid;
    margin: auto;
    position: relative;
    line-height:1.5;
}

检查这个http://jsfiddle.net/X4L5A/1/