html - 相对于 css 中的另一个元素垂直居中？

Question

我有类似下面的情况:

<div id="container">
  <div id="prev">
    prev
  </div>
  <div id="content">
    some content
  </div>
  <div id="next">
    next
  </div>
</div>

我希望结果看起来像这样:

请注意，prev 和 next 相对于 Content 垂直居中，并且所有内容都在页面上水平居中。

很抱歉，如果之前已经介绍过，但似乎有很多不同的方法可以做类似的事情，我不确定哪种方法适用于这种情况。 CSS3/HTML5 并不是真正的问题，只要它在 Chrome、Safari、Firefox 和 IE(可能不是关键)中工作。

编辑:另外，我不确定这个问题是否真的很清楚，但我不知道内容的大小。它可以是任何东西。

编辑 2:此外，内容通常是图像。

Answer 1

有几种方法可以做到这一点，我的选择是在容器上使用 display: table-cell 和 vertical-align: middle。问题是您不能将绝对位置放在容器上:

#container {
  border: solid #000 1px;
  display: table-cell;
  vertical-align: middle;
  height: 400px;
  width: 400px;
  text-align: center;
}

#container div {
  display: inline-block;
}

#content {
   border: solid #000 1px;
   padding: 10px;
   width: 200px;
}

适用于 IE8+ 和现代浏览器。

http://jsfiddle.net/E97yY/