如何使图片恰好位于图像的中间和中心？

Question

我的内部有<div>，有图像和跨度。喜欢这个

<div class = "image">
    <img src = "example.png" alt="myimage"> 
    <span class = "caption">
        Hello World.!
    </span>
</div>

我写的CSS是：

.image {
    position: relative;
    text-align: center;
    display: table;
}
.caption {
    position: absolute;
    left: auto;
    background: black;
    padding: 10px;
    color: white;
    left: 50%;
    top: 50%;
}

这样可行，但当我在.caption中添加更多文字时，我需要手动缩小left: x%;。有没有办法让它以图像为中心？我是CSS的新手。提前谢谢。

Answer 1

是的，是的。

.caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

这是一个实时jsfiddle。