css – 垂直居中的内容：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％的高度。

编辑：http://jsfiddle.net/rdy4u/

Edit2：另外，img是液体/流体，div / img的高度是未知的，宽度设置为800px，最大宽度设置为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的line-height，另一种方法是：

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: ...
}

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

原文地址：https://www.jb51.cc/css/220459.html