垂直和水平方向的中心塊（動態寬度和高度）

我需要垂直和水平居中放置一個元素，並且元素不能有任何固定的尺寸。該元素的內容不得影響...這意味着一些元素將文本左對齊，其他中心，它們可以是圖像，等等等等垂直和水平方向的中心塊（動態寬度和高度）

下面是我在哪裏目前：http://jsfiddle.net/Shpigford/BUbmz/

藍色塊的寬度和高度根據內容和水平中心動態變化，這很好。

但我現在需要做的是垂直居中藍色塊。

藍色塊不能有任何固定的尺寸，儘管紅色塊可以。

這裏是我的CSS：

section { 
    width: 500px; 
    height: 300px; 
    background: red; 
} 
.options { 
    display:table; 
    margin: 0 auto; 
    background: blue; 
} 
h2 { 
    text-align: center; 
    margin: 0; 
    padding: 0; 
} 
ul { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
li { 
    text-align: left; 
}

和HTML：

<section> 
    <div class="options"> 
    <h2>My question</h2> 
    <ul> 
     <li>Ligula Quam</li> 
     <li>Condimentum Nullam Mollis</li> 
     <li>Aenean</li> 
     <li>Commodo Dolor Nibh Ligula Vulputate</li> 
    </ul> 
    </div> 
</section>

來源

2011-11-30 Shpigford