Necesito centrar un elemento tanto vertical como horizontalmente y el elemento no puede tener dimensiones fijas. El contenido del elemento no debe verse afectado ... lo que significa que algunos elementos se alinearán a la izquierda del texto, otros al centro, pueden ser imágenes, etc., etc.

Aquí es donde estoy actualmente:http: //jsfiddle.net/Shpigford/BUbmz

l ancho y la altura del bloque azul cambian dinámicamente según el contenido y se centran horizontalmente, lo que funciona bien.

Pero lo que ahora necesito hacer es centrar el bloque azul verticalmente.

El bloque azul no puede tener dimensiones fijas, aunque el bloque rojolat.

Aquí está mi 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;
}

Y 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>