:before/:after 伪元素的内容垂直居中

我正在尝试实现类似于这张图片的效果：

我有一个图像（作为幻灯片的一部分）包裹在 div 中，并使用 :before 和 :after 伪元素，我显示两个控件以移动到幻灯片的下一个 (>>) 或上一个 (

到目前为止，我有这个：

div {
  position: relative;
}

div:before {
  display:block;
  height: 100%;
  content: "stuff";
  position:absolute;
  top: 0; left: 0;
  text-align: center;
}

但是，我无法将伪元素的内容居中，文本显示如下：

这有可能实现吗？如果没有，最语义化的解决方法是什么？ 我不想将元素本身居中，只想将其内容居中。我更喜欢将元素拉伸到 100% 高度。

Edit: http://jsfiddle.net/rdy4u/ http://jsfiddle.net/rdy4u/

Edit2:另外，img是液体/流体，div/img的高度未知，宽度设置为800px并且max-width to 80%.

假设你的元素不是<img>（因为自闭元素上不允许使用伪元素），让我们假设它是一个<div>，所以一种方法可能是：

div {
    height: 100px ;
    line-height: 100px;
}
div:before, div:after {
    content: "";
    ...
    display: inline-block;
    vertical-align: middle;
    height: ...;
    line-height: normal;
}

如果您无法更改 div 的行高，另一种方法是：

div {
    position: relative;
}
div:before, div:after {
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    width: ...
}

否则，只需将指示器作为背景放置在中心位置即可。