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

Question

我有类似以下情况：

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

我想要的是结果看起来像这样：

请注意，prev和next在引用内容时垂直居中，并且所有内容都在页面上水平居中。

很抱歉，如果之前已经涵盖了这一点，但似乎有很多不同的方法来做类似的事情，我不确定哪种适用于这种情况。只要CSS3 / HTML5适用于Chrome，Safari，Firefox和IE（不是至关重要的），CSS3 / HTML5就不是问题。

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

编辑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/

Answer 2

另一种方法，这次使用绝对定位，如果你愿意稍微改变你的HTML结构。请注意，如果要使用容器来约束宽度，或者可能添加另一个宽度约束换行，则Prev和Next按钮可以位于内容div中的任何位置，甚至可以位于内容div之外。 （不是真的有必要，我想。）

注意：我已从此答案中删除了所有不必要的标记。看一下这个明显有用的例子。

Fiddle

HTML：

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

CSS：

#content {
    margin:0 auto;
    position:relative;
}
#prev, #next {
    position:absolute;
    width:40px;
    height:20px;
    top:50%;
    margin-top:-10px; /* negative half of height */
}
#prev {
    left:-45px; /* negative [width plus any desired padding] */
    text-align:right;
}
#next {
    right:-45px; /* negative [width plus any desired padding] */
    text-align:left;
}

Answer 3

使元素居中的最佳方法是使用inline-blocks和vertical-align。

这是一个开始的小提琴：http://jsfiddle.net/kizu/7Qj3G/

在此您将display: inline-block设置为所需元素，向其添加vertical-align: middle即可完成。

剩下的事情是，如果你需要IE中的支持，那么你需要在块级元素上使用inline-block“打开”display: inline; zoom: 1;行为。