如何製作一個完全中間和圖像中心的標題？

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。