垂直對齊表內的容器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; 
     } 

UPDATE 你需要改變填充 - 左視包裝寬度而定（如果您將其設置爲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相同DIV的height。像這樣寫：

#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/