垂直和水平居中的块具有动态的宽度和高度

Question

我需要使元素在垂直和水平方向上居中，并且元素不能具有任何固定尺寸。 元素的内容一定不受影响...意味着某些元素将在文本上左对齐，其他元素居中，它们可能是图像等。

这是我目前在的位置： 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>

Answer 1

这是一个用于垂直居中放置DIV的解决方案，并为包括旧版IE版本在内的各种浏览器提供后备功能。

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[编辑]

翻译后，您的小提琴变得像这样：

http://jsfiddle.net/GolezTrol/BUbmz/1/