Как сделать подпись в середине и середине изображения?

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.